Css Dropdown Menu - Hover исчезает

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

Из-за вашего 9px верхнего края, определенных в CSS существует разрыв между верхними кнопками и выпадающего меню. Если мышь запускается через этот пробел, тогда наклон отменяется, и все исчезает.

Либо удалите зазор или замените разрыв с реальным элементом, как 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 и удалить запас 9px из .m-NavBar уль Li ул

Затем создайте HR стиль:

.m-NavBar уль Li ч {границы: 0px; padding: 0px; margin: 9px 0px 0px 0px; }

Answer 2

Я считаю, что проблема, с которой вы столкнулись, связана с разрывом между вашей ссылкой и выпадающим меню, поэтому все, что вам нужно сделать, - дать вашему классу -navbar ul li a нулевое значение, поэтому оно будет выглядеть следующим образом: :

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

Answer 3

Просто измените:

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

Thi s будет делать трюк, потому что: парить не увольняют только <li> элемента, но <a> больше не колебались

Answer 4

Update:

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