Css 下拉菜单 - 悬停消失

Posted 2023-03-06

【中文标题】Css 下拉菜单 - 悬停消失

【英文标题】：Css Dropdown Menu - Hover disappear

【发布时间】：2015-03-27 19:08:52

【问题描述】：

当鼠标图标进入下拉菜单时，悬停不应消失。伙计们，我该怎么做？

Fiddle

.m-navbar ul lifloat: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none;

.m-navbar ul li acolor:#2d3438;border-radius: 4px;padding: 7px 25px;text-decoration:none;

.m-navbar ul li a:hovertext-decoration: none; background-color: #656a6f;border-radius: 4px;color: #ffc000;

.m-navbar ul li uldisplay: none;width: 200px;float: left;background-color: #ffc000;margin: 9px 0 0 0;position: absolute;padding: 5px 0 ;border-radius:4px;

.m-navbar ul li:hover ul display: block;

.m-navbar ul li ul li a:hoverbackground-color: #ffc000;color: #ffffff;

<div class="m-navbar">
  <ul>
    <li>
      <a href="">Home</a>
      <ul>
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Monitors</a></li>
        <li><a href="#">Printers</a></li>
      </ul>
    </li>
    <li>
      <a href="">References</a>
      <ul>
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Monitors</a></li>
        <li><a href="#">Printers</a></li>
      </ul>
    </li>
    <li><a href="">About Me</a> </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>

【问题讨论】：

它们不会消失，但是在菜单和初始按钮之间有一个间隙，如果鼠标点击这个区域，它就会消失。失去空间，你应该没事。

【参考方案1】：

更新：

.m-navbar ul lifloat: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none;

通过添加一个 9px padding-bottom：

.m-navbar ul lifloat: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none; padding-bottom: 9px;

如此处所示：http://jsfiddle.net/gzd4ygmd/5/

【参考方案2】：

只是改变：

.m-navbar ul li a:hovertext-decoration: none; background-color: #656a6f;border-radius: 4px;color: #ffc000;

到

.m-navbar ul li:hover > atext-decoration: none; background-color: #656a6f;border-radius: 4px;color: #ffc000;

这可以解决问题，因为 :hover 仅触发到 <li> 元素，但 <a> 不再悬停

【参考方案3】：

由于在 CSS 中定义了 9 像素的上边距，因此顶部按钮和下拉菜单之间存在间隙。如果鼠标在该间隙上触发，则悬停被取消，一切都消失了。

要么删除间隙，要么用实际元素替换间隙，比如像这样的 HR 元素：

<li>
    <a href="">Home</a>
    <hr />
    <ul>        
        <li><a href="#">Laptops</a></li>
        <li><a href="#">Monitors</a></li>
        <li><a href="#">Printers</a></li>
    </ul>
</li>

然后编辑您的 CSS 并从 .m-navbar ul li ul

中删除 9px 边距

然后创建 HR 样式：

.m-navbar ul li hr 边框：0px;填充：0px；边距：9px 0px 0px 0px；

【参考方案4】：

我相信你面临的问题是因为你的链接和下拉菜单之间的差距，所以你需要做的就是给你的 -navbar ul li a 类的边距为零，所以它看起来像这样：

.m-navbar ul li acolor:#2d3438;border-radius: 4px;padding: 7px 25px;text-decoration:none;margin:0