瞭解浮動下拉菜單

我很好奇浮動效果在這個下拉菜單http://jsfiddle.net/0eLfwoof/。所以，事情是，如果我沒有使用浮動導航或導航> UL，當我把鼠標懸停在子菜單上，子菜單消失。所以我要問的是爲什麼我要在這裏使用浮點數..瞭解浮動下拉菜單

<!--html file --> 

<nav> 
    <ul> 
    <li><a href="#">list beritem</a> 
      <ul> 
      <li><a href="#">SUB LIST</a></li> 
      <li><a href="#">SUB LIST2</a> 
        <ul> 
         <li><a href="">sub3 menu</a></li> 
         <li><a href="">sub3 menu</a></li> 
         <li><a href="">sub3 menu</a></li> 
        </ul> 
       </li> 
      <li><a href="#">SUB LIST</a></li> 
      </ul> 
     </li> 
    <li><a href="#">list item</a></li> 
    <li><a href="#">list item</a></li> 
    <li><a href="#">list item</a></li> 
    </ul> 
</nav> 

</body> 

<!-- CSS --> 

*{ 
    margin:0; padding:0; 
} 

p{ 
    color:red; 
    clear:both; 
} 

/* it work when i make nav or nav ul float */ 
nav{ 
    float:left; 
} 

ul li{ 
    list-style:none; 
    position:relative; 
} 

a{ 
    text-decoration:none; 
    background-color:aqua; 
    display:inline-block; 
    width:100px; 
    height:20px; 
    padding:5px; 
    border:1px solid black; 
} 

/*-- Second Level Menu --*/ 

ul li ul{ 
    display:none; 
    position:absolute; 
    left:110px; 
    top:0px; 
} 

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


li ul a{ 
    background-color:#298d30; 
}

來源

2015-02-06 Hilmanrdn

你不必這樣做。這裏的問題是ul顯示爲一個塊。當您嘗試將鼠標懸停在子列表2上時，您實際上將鼠標懸停在第一個菜單的第二個列表項上！

ul { 
    display: inline-block; 
}

這裏的工作小提琴：http://jsfiddle.net/0eLfwoof/8/

看一看發生了什麼的DOM所以理論上，如果我們做到這一點應該工作。

enter image description here

的ul被顯示爲塊，其跨越到母體的寬度（完全填滿它）。有兩種方法可以實現解決此問題。

浮動的元素，它不會使元素作爲一個塊
設置顯示爲inline-block的

不要忘了，即使你設置元素的寬度，如果一個元素處於塊級別，邊距佔用剩餘的空間來填充父級，所以這不起作用。

我認爲這應該足以幫助你理解發生了什麼。

來源

2015-02-06 08:14:31 LogixMaster

謝謝。但我使用親戚，所以我的子導航位置取決於它的父母絕對。在那裏你說這個問題是絕對的，你能解釋一下爲什麼如果我沒有使用float，它會消失嗎？什麼是連接。我不在尋找替代解決方案，只是好奇而已。再次感謝 – Hilmanrdn 2015-02-06 08:28:14

對不起，我後來意識到你的意圖是當你使用絕對定位。我更新了答案，使其更有意義。 – LogixMaster 2015-02-06 08:30:26

甜美，明白！我想知道爲什麼自昨天以來發生這種事情，因爲我不會接受什麼會工作，我總是很好奇爲什麼，所以同樣的錯誤不再出現。十分感謝！ – Hilmanrdn 2015-02-06 08:37:07

瞭解浮動下拉菜單

回答

相關問題