2015-10-16 5 views
0

сделать выпадающее меню из меню Существующего CSS

ul li ul.dropdown{ 
 
\t min-width: 125px; 
 
    background: #f2f2f2; 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
} 
 
ul li:hover ul.dropdown{ 
 
    display: block; 
 
} 
 
ul li ul.dropdown li{ 
 
\t display: block; 
 
    }
<div class="navigation"> 
 
    
 

 

 
\t <ul> 
 
\t <li><a href = 'index.html'>Home</a></li> 
 
\t <li><a href = 'media.html'>Media Design</a></li> 
 
\t <li><a href = 'innovatie.html'>Innovatieroutes</a></li> 
 
\t <li><a href = 'info.html'>Informatie</a></li> 
 
\t   <ul class="dropdown"> 
 
      <li><a href="#">Open dagen</a></li> 
 
      <li><a href="#">Beroepen</a></li> 
 
      <li><a href="#">Studie</a></li> 
 
\t \t \t </ul> 
 
\t <li><a href = 'contact.html'>Contact</a></li> 
 
</ul>

Я пытаюсь сделать меню CSS с выпадающим меню, но почему-то я не может позволить, чтобы меню упасть вниз, когда я наведите курсор вкладка «Informatie», подменю будет отображаться только после «Informatie». Возможно, некоторые из вас, ребята, могут помочь мне с моим меню.

ответ

1

Fixed ваш код

ul li ul.dropdown{ 
 
\t min-width: 125px; 
 
    background: #f2f2f2; 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
} 
 
ul li:hover ul.dropdown{ 
 
    display: block; 
 
} 
 
ul li ul.dropdown li{ 
 
\t display: block; 
 
    }
<div class="navigation"> 
 
    
 

 

 
\t <ul> 
 
\t <li><a href = 'index.html'>Home</a></li> 
 
\t <li><a href = 'media.html'>Media Design</a></li> 
 
\t <li><a href = 'innovatie.html'>Innovatieroutes</a> 
 
\t <li><a href = 'info.html'>Informatie</a> 
 
\t   <ul class="dropdown"> 
 
      <li><a href="#">Open dagen</a></li> 
 
      <li><a href="#">Beroepen</a></li> 
 
      <li><a href="#">Studie</a></li> 
 
\t \t \t </ul> 
 
    </li> 
 
\t <li><a href = 'contact.html'>Contact</a></li> 
 
</ul>

Ваша ошибка была, вы написали ul вне li «s закрывающего тега </li>. Вы должны ввести код ul сразу после окончания a тег закрытия тега </a>

+0

Привет, Xahed, как-то, когда я наводил указатель на информацию о вкладке, мое раскрывающееся меню не появится. – SmashingJummy

+0

Я вижу, что он отлично работает на мой ответ. Если вы наведите указатель мыши на «Информация», вы увидите подменю –

+0

. Немного объяснений было бы полезно. В чем была проблема и как ваш ответ решал ее? – showdev

1

Вам необходимо поставить ul внутри li.