Question

当鼠标图标出现在下拉菜单中时，悬停不应该消失。我怎么能这样做呢？

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 1

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

要么删除间隙，要么用实际元素替换间隙，就像这样的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 {border：0px;填充：0px;保证金：9px 0px 0px 0px; }

Answer 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>不再悬停

Answer 3

更新

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

添加9px填充底部：

.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/

Answer 4

我认为您遇到的问题是因为您的链接与下拉菜单之间存在差距，所以您只需要为-navbar ul li a课程提供零余量，这样看起来就像像这样：

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

Css下拉菜单 - 悬停消失

4 个答案: