了解下拉菜单上的浮动

Question

我很好奇这个下拉菜单的浮动效果 http://jsfiddle.net/0eLfwoof/。所以，问题是，如果我没有在 nav 或 nav > ul 上使用浮动，当我将鼠标悬停在子菜单上时, 子菜单消失。所以我要问的是为什么我必须在这里使用 float ..

<!--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;
}

Answer 1

您不必这样做。这里的问题是 ul 显示为一个块。当您尝试将鼠标悬停在子列表 2 上时，您实际上是将鼠标悬停在第一个菜单的第二个列表项上！所以从理论上讲，如果我们这样做应该可以工作：

ul { 
    display: inline-block;
}

这是工作 fiddle ：http://jsfiddle.net/0eLfwoof/8/

看看 DOM 中发生的事情。

ul 显示为一个块，跨越父级的宽度（完全填充）。有两种方法可以解决这个问题。

浮动元素，这不会将元素呈现为块
将显示设置为内联块

不要忘记，即使你设置了元素的宽度，如果元素处于块级别，边距会占用 space 的其余部分来填充父元素，这样就不会'不工作。

我认为这应该足以帮助您了解发生了什么。

了解下拉菜单上的浮动

Understanding Float On Dropdown Menu

html

css

drop-down-menu