Отзывчивое чистое меню CSS

Question

Попытка сделать подменю отображается при наведении указателя мыши.

В текущем состоянии очень простой (без стилизации), просто пытающийся получить функциональность.

HTML:

<nav class="main_nav"> 
     <ul class="main_nav"> 
      <li><a class="show_menu" href="#">Menu</a></li> 
       <li> 
        <ul> 
         <li><a class="hidden_nav" href="#">Functions</a></li> 
         <li><a class="hidden_nav" href="#">Forms</a></li> 
         <li><a class="hidden_nav" href="#">PHP Info</a></li> 
         <li><a class="hidden_nav" href="#">Encoding</a></li> 
        </ul> 
       </li> 
     </ul>     
    </nav> 

CSS:

.hidden_nav { 
display: none; 
} 

.show_menu:hover > .hidden_nav { 
display: block; 
color: green; 
} 

Моя проблема с CSS таргетинг - выше, не единственный метод, который я попробовал. Любая помощь будет принята с благодарностью.

Answer 1

Есть несколько способов, вы должны реструктурировать это. Вы должны установить скрытый код ul. Вы можете иметь subnav быть брат или ребенок (это родственный ниже) и показать его, когда .show_menu родитель li наведен:

UPDATE:

HTML

<nav class="main_nav"> 
    <ul class="main_nav"> 
     <li><a class="show_menu" href="#">Menu</a> 
       <ul class="subnav"> 
        <li><a class="hidden_nav" href="#">Functions</a></li> 
        <li><a class="hidden_nav" href="#">Forms</a></li> 
        <li><a class="hidden_nav" href="#">PHP Info</a></li> 
        <li><a class="hidden_nav" href="#">Encoding</a></li> 
       </ul> 
     </li> 
    </ul>     
</nav> 

CSS

.subnav { 
    display: none; 
} 

.main_nav li:hover ul.subnav { 
    display: block; 
    color: green; 
} 

FIDDLE

Answer 2

Этот синтаксис означает 'непосредственные дети':

.show_menu:hover > .hidden_nav 

Попробуйте это вместо:

.show_menu:hover .hidden_nav 

Answer 3

Ваш код плохо структурирован для задачи, которую вы пытаетесь выполнить. Вместо того, чтобы вдаваться в подробности, я покажу рабочий - и IMO, стильный пример, который поможет вам быстро.

в действии: http://jsfiddle.net/xLkntwkt/2/

HTML

<nav class="main_nav"> 
    <ul class="main_nav"> 
     <li> 
      <a class="show_menu" href="#">Menu</a>   
      <ul class="hidden_nav"> 
       <li><a href="#">Functions</a></li> 
       <li><a href="#">Forms</a></li> 
       <li><a href="#">PHP Info</a></li> 
       <li><a href="#">Encoding</a></li> 
      </ul> 
     </li> 

     <li> 
      <a class="show_menu" href="#">Menu 2</a>   
      <ul class="hidden_nav"> 
       <li><a href="#">Functions</a></li> 
       <li><a href="#">Forms</a></li> 
       <li><a href="#">PHP Info</a></li> 
       <li><a href="#">Encoding</a></li> 
      </ul> 
     </li> 

     <li> 
      <a class="show_menu" href="#">Menu 3</a>   
      <ul class="hidden_nav"> 
       <li><a href="#">Functions</a></li> 
       <li><a href="#">Forms</a></li> 
       <li><a href="#">PHP Info</a></li> 
       <li><a href="#">Encoding</a></li> 
      </ul> 
     </li> 
    </ul>     
</nav> 

CSS

ul.main_nav > li { 
    background: #333; 
    color: #fff !important; 
    padding: 10px; 
} 

ul.main_nav > li a { 
    color: inherit; 
    text-decoration: none; 
} 

ul.main_nav > li .hidden_nav { 
    max-height: 0px; 
    opacity: 0; 

    transition: all 0.25s ease-in-out; 
} 

ul.main_nav > li:hover .hidden_nav { 
    max-height: 300px; 
    opacity: 1; 
}