難以定位在下拉菜單中的子元素

基本上，我有一個簡單的CSS下拉菜單和鏈接的背景圖像。當我將鼠標懸停在一個具有子元素的元素上，然後嘗試在該子元素上定位時，它確實很難並且不總是有效。這裏是我的片斷：難以定位在下拉菜單中的子元素

CSS

nav { 
width: 710px; 
} 

nav ul ul { 
display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

nav ul { 
padding-top: 20px; 
list-style: none; 
position: relative; 
display: inline-table; 
} 

nav ul li { 
    float: left; 
    width: 95px; 
    height: 32px; 
} 
    nav ul li a { 
     display: block; 
     text-indent: -9999em; 
    } 

    .element, 
    .element:hover { width: 95px; height: 32px; } 

    .home { background-image: url(img/home.png); } 
    .home:hover { background-image: url(img/home1.png); } 


nav ul ul { 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 
    nav ul ul li { 
     padding: 0; 
     padding-right: 90px; 
     position: relative; 
    } 
     nav ul ul li a { 
      font-family: Arial, Helvetica, sans-serif; 
      color: #fff; 
      font-size: 16px; 
      text-transform: uppercase; 
      text-decoration: none; 
     } 

      .sub-element, .sub-element:hover { width: 180px; height: 21px; } 

      .interiorni { background-image: url(img/interiorni-vrati-active.png); } 
      .interiorni:hover { background-image: url(img/interiorni-vrati.png); }

HTML

<nav> 
    <ul> 
     <li><a href="#" class="element home" alt="Начало"></a> 
      <ul> 
       <li><a href="#" class="sub-element interiorni" alt="Интериорни Врати"></a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

我在做什麼錯？有什麼想法嗎？謝謝。

來源

2014-07-01 user2695684

請發佈您的HTML代碼。 –

@Alek我加了它。對不起，我忘了它。 – user2695684

對於圖片替換，您可以使用Nicolas Gallagher提供的另一種技術，該技術非常適用於Bootstrap http://nicolasgallagher.com/another-css-image-replacement-technique/。
塞繆爾謝謝你的jsfiddle。
像他說的那樣，使用子選擇器>，因爲您有許多父母規則，並且由於像nav ul這樣的全局選擇器而重複規則。
爲什麼您使用display:inline-table如果您在li之後使用float之後，而不是像display:table-cell或display:inline-block之類的東西？同樣每li會漂浮，並有寬度等

.element, 
.element:hover { width: 95px; height: 32px; }

95px你宣佈就在你的鏈接有display:block和他的父母有相同的價值觀。你需要離開身高值，因爲塊元素佔他父母寬度的100％：我已更新JsFiddle here。希望這是你想要的

來源

2014-07-01 15:28:15 AlexDom

謝謝。這解決了我的問題。 – user2695684

我爲你扔了一塊JSFiddle - 你遇到的問題可能是由幾個問題引起的。你的.element和.sub-element類有點笨重。相反，嘗試使用child selectors.但是，如果沒有HTML標記，很難解決。

nav ul li a { 
     display: block; 
     text-indent: -9999em; 
    }

當我嘗試渲染時，這個塊特別引起了我的問題 - 所有的文本都遠離屏幕。如果可以的話，重構你的HTML和CSS。

來源

2014-07-01 15:02:49

謝謝您的評論。我會深入挖掘兒童選擇器。 – user2695684

難以定位在下拉菜單中的子元素

回答

相關問題