Css 下拉菜单 - 悬停消失答案

【问题标题】：Css Dropdown Menu - Hover disappearCss 下拉菜单 - 悬停消失
【发布时间】：2015-03-27 19:08:52
【问题描述】：

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

.m-navbar ul li{float: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none;}

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

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

.m-navbar ul li ul{display: 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:hover{background-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>

【问题讨论】：

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

标签： html css drop-down-menu hover

【解决方案1】：

更新：

.m-navbar ul li{float: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none;}

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

.m-navbar ul li{float: 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:hover{text-decoration: none; background-color: #656a6f;border-radius: 4px;color: #ffc000;}

到

.m-navbar ul li:hover > a{text-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 a{color:#2d3438;border-radius: 4px;padding: 7px 25px;text-decoration:none;margin:0}

【讨论】：