Css dropdown menu - Hover disappears
When the mouse icon hits the dropdown menus, the freeze shouldn't go away. How can I do this 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>
source to share
Because of your 9px top margin defined in your CSS, there is a space between the top buttons and the dropdown menu. If the mouse is launched through this space, then the tilt is canceled and everything disappears.
Either remove the gap or replace the gap with an actual element, such as an HR element:
<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 an HR style:
.m-navbar ul li hr {border: 0px; padding: 0px; margin: 9px 0px 0px 0px; }
source to share
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: hover only fires on the element <li>
, but <a>
no longer hovers
source to share
Update:
.m-navbar ul li{float: left; font-weight: 500; font-size: 20px;margin-left: 25px;list-style:none;}
By adding 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 shown here: http://jsfiddle.net/gzd4ygmd/5/
source to share
I believe the problem you are having is with the break between your link and the dropdown, so all you have to do is give your class a -navbar ul li a
null value, so it will look like this:
.m-navbar ul li a{color:#2d3438;border-radius: 4px;padding: 7px 25px;text-decoration:none;margin:0}
source to share