html - CSS 下拉菜单 - 悬停消失

Question

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

Fiddle

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

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 { 边框:0px;内边距:0px；边距:9 像素 0 像素 0 像素 0 像素； }