CSS下拉菜单-悬停消失

Question

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

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

Because of your 9px top margin defined in your CSS there is a gap between the top buttons and the drop down menu. If the mouse triggers over that gap then the hover is cancelled and everything disappears.

Either remove the gap, or replace the gap with an actual element, like an HR element like so:

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

Then edit your CSS and remove the 9px margin from .m-navbar ul li ul

Then create the HR styling:

.m-navbar ul li hr { border: 0px; padding: 0px; margin: 9px 0px 0px 0px; }

Answer 2

Just change :

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

to

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

This will do the trick because the :hover is fired only to the <li> element but <a> is no longer hovered

Answer 3

Update:

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

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

As seen here: 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}