Question

我对此下拉菜单http://jsfiddle.net/0eLfwoof/上的浮动效果感到好奇。所以，问题是，如果我没有在导航或导航上使用浮动＆gt; 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;
}

Answer 1

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

ul { 
    display: inline-block;
}

这是工作小提琴：http://jsfiddle.net/0eLfwoof/8/

看看DOM中发生了什么。

enter image description here

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

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

不要忘记，即使您设置了元素的宽度，如果元素处于块级别，则边距会占用剩余空间以填充父级，因此不会工作。

我认为这应该足以帮助您了解发生的事情。

了解浮动下拉菜单

1 个答案: