html - 了解下拉菜单上的 float

Question

我很好奇这个下拉菜单的 float 效果http://jsfiddle.net/0eLfwoof/ .所以，问题是，如果我没有在 nav 或 nav > ul 上使用 float ，当我将鼠标悬停在子菜单上时，子菜单就会消失。所以我要问的是为什么我必须在这里使用 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 显示为一个 block 。当您尝试将鼠标悬停在子列表 2 上时，您实际上是将鼠标悬停在第一个菜单的第二个列表项上!所以从理论上讲，如果我们这样做应该可行:

ul { 
    display: inline-block;
}

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

看看 DOM 中发生了什么。

ul 显示为一个 block ，跨越父级的宽度(完全填充)。您可以通过两种方式来解决这个问题。

1. float 元素，不会将元素呈现为 block
2. 将显示设置为内联 block

不要忘记，即使你设置了一个元素的宽度，如果一个元素是 block 级别的，边距会占用剩余的空间来填充父元素，所以这是行不通的。

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