了解浮动下拉菜单

我很好奇浮动效果在这个下拉菜单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

了解浮动下拉菜单

回答

相关问题