Выпадающее меню не работает

Question

Я сделал шаблон Wordpress с простым выпадающим меню CSS. Код, который я использовал, - это код, который я использовал регулярно, но на этот раз, когда вы наводите курсор на кнопку и хотите навести курсор на раскрывающееся меню, выпадающее меню исчезнет.

Кто-нибудь знает, как я могу решить эту проблему и что не так?

Ссылка на шаблон: http://bit.ly/1Ivcg2U

#navigation ul { 
 
\t list-style: none; 
 
\t width: 800px; 
 
\t height: 40px; 
 
\t padding: 0; 
 
\t margin: 0 auto; 
 
} 
 

 
#navigation li { 
 
\t float: left; 
 
\t position: relative; 
 
\t z-index: 500; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin: 0px 40px; 
 
\t padding: 5px; 
 
} 
 

 
#navigation li ul { 
 
    display: none; 
 
    position: absolute; 
 
    \t max-width: 140px; 
 
    \t top: 40px; 
 
\t left: -20px; 
 
} 
 

 
ul#categories li { 
 
\t width: 100%; 
 
    \t float: left; 
 
    \t margin: 0; 
 
    \t background: #fff; 
 
} 
 

 
ul#categories a { 
 
\t padding: 10px; 
 
\t width: 200px; 
 
} 
 

 
ul#categories li:hover{ 
 
    \t background: #000; 
 
} 
 

 
ul#navigation li:hover > ul, 
 
#navigation ul li:hover > ul { 
 
     display: block; /* display the dropdown */ 
 
} 
 

 

 
#navigation a { 
 
\t font-family: 'Montserrat'; 
 
\t color: #474747; 
 
\t text-decoration: none; 
 
\t font-weight: 300; 
 
\t letter-spacing: 2px; 
 
\t text-transform: uppercase; 
 
\t font-size: 10px; 
 
} 
 

 
li a:hover { 
 
\t color: #000; 
 
\t font-family: 'Montserrat'; 
 
} 
 

 
ul#categories li a:hover { 
 
\t color: #fff; 
 
}

<div id="bar"> 
 
<div id="navigation"> 
 
    <ul id="nav"> 
 
    <li><a href="http://todaysbeauty.nl">Home</a></li> 
 
    <li> 
 
     <a href="#">Categorieën</a> 
 
     <ul id="categories"> 
 
     <li><a href="/category/travel/">travel</a></li> 
 
     <li><a href="/category/beauty/">Beauty</a></li> 
 
     <li><a href="/category/fashion/">Fashion</a></li> 
 
     <li><a href="/category/lifestyle/">Lifestyle</a></li> 
 
     <li><a href="/category/persoonlijk/">Persoonlijk</a></li> 
 
     <div class="clear"></div> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="/over-mij" class="selected">Over mij</a> 
 
     <div class="clear"></div> 
 
    </li> 
 
    <li> 
 
     <a href="/contact">Contact</a> \t 
 
     <div class="clear"></div> 
 
    </li> 
 
    <li> 
 
     <a href="/zakelijk" class="selected">Zakelijk</a> 
 
     <div class="clear"></div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Проблема заключается в том, что в меню второго уровня является слишком низким от вашего верхнего уровня:

#navigation li ul { 
    display: none; 
    position: absolute; 
    max-width: 140px; 
    top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/ 
    left: -20px; 
} 

Когда курсор перемещается на пробел, он больше не находится в состоянии «зависания», поэтому выпадающее окно исчезает. Сокращение разрыва устранит проблему.