Css下拉菜单 - 悬停消失 [英] Css Dropdown Menu - Hover disappear

问题描述

当鼠标图标进入下拉菜单时，悬停应不会消失。我该如何做呢？

When the mouse icon gets on the drop down menus, hover shouldn't be disappearing. How can I do it guys?

小提琴

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

推荐答案

更新：

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

a 9px padding-bottom：

By adding a 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/

这篇关于Css下拉菜单 - 悬停消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！