отзывчивое раскрывающееся меню - скрытый ли не может быть нажат

Question

У меня есть это выпадающее меню, и после добавления тега ID и тега nav я не могу навести курсор на раскрывающийся список, поскольку они исчезают, как только я пытаюсь навести на них

смотрите код здесь JSFiddle

<div class="container"> 
    <nav id="navigation"> 
     <label for="show-menu" class="show-menu">Menu</label> 
     <input type="checkbox" id="show-menu" role="button"> 
     <ul id="menu"> 
      <li><a href="#">HOME</a></li> 
      <li> 
       <a href="#">SERMONS <span>&#x25BC</span></a> 
       <ul class="hidden"> 
        <li><a href="#">Who We Are</a></li> 
        <li><a href="#">What We Do</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">EVENTS <span>&#x25BC</span></a> 
       <ul class="hidden"> 
        <li><a href="#">Photography</a></li> 
        <li><a href="#">Web & User Interface Design</a></li> 
        <li><a href="#">Illustration</a></li> 
       </ul> 
      </li> 
      <li><a href="#">CONNECT<span>&#x25BC</span></a></li> 
      <li><a href="#">STAFF<span>&#x25BC</span></a></li> 
      <li><a href="#">CONTACT</a></li> 
      <li><a href="#">LOCATIONS<span>&#x25BC</span></a></li> 
      <li><a href="#">OTHERS<span>&#x25BC</span></a></li> 
     </ul> 
    </nav> 
</div> 

Answer 1

Простой вам просто нужно добавить этот блок кода в CSS

#navigation li:hover ul 
{ 
    display:block; 
} 

все будет хорошо, я только что сделал c висящий здесь, просто добавил этот блок кода и его работу .. да ....

http://jsfiddle.net/naveenkumarpg/1000s8y0/16/

Answer 2

это потому, что вы показываете список .hidden детей только тогда, когда <a> наведен на, согласно этому правилу:

#navigation > ul > li > a:hover + .hidden, .hidden:hover { 
    display: block; 
} 

Это не сработает, поскольку псевдокласс класса теряется после того, как ваш курсор покидает элемент и пересекает его в соседний, теперь отображаемый элемент .hidden. Чтобы этого избежать, вы вынуждаете показывать .hidden до тех пор, пока родительский элемент, <li>, наводится. Таким образом, мы можем использовать этот селектор:

#navigation > ul > li:hover .hidden, .hidden:hover { 
    display: block; 
} 

Посмотреть рабочий скрипку здесь: http://jsfiddle.net/teddyrised/1000s8y0/14/

Answer 3

#navigation > ul > li:hover .hidden, .hidden:hover { 
    display: block; 
} 

демо - http://jsfiddle.net/1000s8y0/15/

Answer 4

Вместо

#navigation li ul { 
    display: none; 
} 

Просто используйте:

.hidden { 
    display: none; 
} 

Удостоверяясь дисплей: none применяется с наименьшей специфичностью, поэтому стиль зависания может переопределить его.

http://jsfiddle.net/1000s8y0/17/