Question

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

我明白为什么它正在消失，我想知道是否有办法使这项工作。边缘和填充似乎不适用于ul li css。

<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

这是因为Item 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

鼠标输出时子导航下拉列表取消激活

3 个答案: