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

Posted 2023-02-22

【中文标题】鼠标移出时子导航下拉菜单停用

【英文标题】：Sub-Navigation Dropdown deactivates on mouse-out

【发布时间】：2014-09-19 02:11:47

【问题描述】：

我有一个菜单和一个子菜单。子菜单需要在鼠标悬停时显示，但需要显示在彩色区域下方。当我将鼠标移出第 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;

【问题讨论】：

在您认输之前，请注意您所描述的内容仅使用 CSS 即可实现。以防我的答案低于当前投票最高的答案，我要求您最后一次查看我的解决方案。如果仍然不能满足您的要求，我很乐意提供帮助。

【参考方案1】：

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

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

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

【讨论】：

好的，我添加了 som bg 颜色... PSD 设计出现了子菜单出现在绿色 BG 上方，添加 padding-top 会产生太多的负蓝色空间...但是任何其他方式导致子菜单停用：jsfiddle.net/G4dss/8

如果没有 javascript，您想要做的事情非常困难。但如果您可以摆脱纯色，请尝试使用边框代替jsfiddle.net/icodeforlove/G4dss/9

那个边框可以透明吗？如，完全透明？

哦，我同意，这很难做到……只需要验证一下，我就可以告诉客户了 :)

@ClaytonDaniels 没问题，我建议使用伪元素，因为你可以让它透明。

【参考方案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 来演示。希望这对您有所帮助！

【讨论】：

好的，如果设计师发送 PSD 并希望子导航从黄色背景后面弹出（到绿色背景上）怎么办？百分比在这里似乎不起作用，当我鼠标移出时子菜单不断消失...jsfiddle.net/G4dss/7

如果您指定的百分比超过 100%，则会出现同样的问题 - 因为子菜单 <ul> 将再次出现在菜单项结束的下方，从而产生间隙。我会针对您提出的新问题修改我的问题。

【参考方案3】：

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

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

fiddle