鼠标移出时子导航下拉菜单停用

Question

我有一个菜单和一个子菜单。子菜单需要在鼠标悬停时显示，但需要显示在彩色区域下方。当我将鼠标移出第 3 项时，子菜单消失。

我明白它为什么会消失，我想知道是否有办法让它发挥作用。 Margin 和 Padding 似乎在 ul li css 上不起作用。

http://jsfiddle.net/G4dss/

<div id="bg">
    <ul class="menu">
      <li class="first leaf">Item 1</li>
      <li class="leaf">Item 2</li>
      <li class="expanded">Item 3
        <ul class="menu">
          <li class="leaf">Sub-item 1</li>
          <li class="leaf">Sub-item 2</li>
          <li class="leaf">Sub-item 3</li>
        </ul>
      </li>
      <li class="leaf last">Last item</li>
    </ul>
</div>

CSS

#bg {
    background-color: yellow;
    width: 400px;
    height: 50px;
}

ul {
  float: left;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  float: left;
  list-style: none;
  list-style-image: none;
  padding: .5em 1em;
  margin: 0;
  cursor: pointer;
}
ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  left: 0;
  top: 50px;
}

ul li:hover ul {
  display: block;
}

Answer 1

发生这种情况是因为您将下拉菜单放置得太低了，您可以通过使用padding-top 并降低top 来达到相同的效果，这里是working example

ul li ul {
  top: 20px;
  padding-top: 30px;
}

如果您不熟悉 chrome dev tools，当您遇到问题时，有时在元素上添加边框会有所帮助 like this

Answer 2

这是因为第 3 项与包含子菜单项的 <ul> 之间存在间隙。您为子菜单指定的top 值太大，导致它显得太低并造成此差距。当光标进入此间隙时，菜单消失，因为不再应用 :hover 样式。

解决此问题的一种方法是对top 使用百分比值，这样就无需猜测需要为其指定多少像素：

ul li ul {
    top: 100%;
}

这里有一个JSFiddle 来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑： 上面的 CSS 使子菜单 <ul> 直接出现在父菜单项底部的下方。但是，您不能指定大于 100% 的值，否则会出现同样的问题，并且子菜单会显得太低（返回差距）。

解决此需求的一种方法是实际增加父菜单项的高度。在您的情况下，只需使其与黄色背景一样高，子菜单就会出现在绿色背景中。因此，使用此 CSS 应该适用于您的情况：

#bg > .menu > li{
    height: 70px; /* Same height as yellow #bg element */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

这只会导致主菜单项的高度增加（这样所有子菜单项也不会因高度增加而间隔过大）。 box-sizing 属性是为了确保<li> 元素上的现有填充也被计入高度，因此子菜单不会显得过低。这是一个new JSFiddle 来演示。希望这对您有所帮助！

Answer 3

发生这种情况是因为您使用了top: 50px。改为：

ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  left: 0;
  /*top: 50px; remove this*/
  padding-top:10px; /*Add this*/
}

fiddle