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

Я создаю выпадающее меню, которое появляется при наведении указателя мыши на заголовок. Хотя я следил за инструкциями по w3schools, мой код не работает, и я не знаю, почему и как его исправить. Все ответы приветствуются. Вот мой код:Создание выпадающего меню с CSS

.dropdown { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2016-12-10 Brother Eye

Вам нужно написать стили наведения на обертке, то есть <div class="menu">...</div>, потому что элемент <div class="dropdown-content">...</div> является потомком этого.

Также дайте display: inline-block; элементу, который используется для открытия выпадающего меню здесь, это <h2 class="dropdown">Menu</h2>, поэтому это приведет к тому, что раскрывающееся меню откроется, когда курсор над ним, что позволит пользователю выбрать опцию.

Проверьте приведенный ниже фрагмент кода.

.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.menu:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
    <ul> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

источник

2016-12-10 11:02:07

aha ... Я понял! Большое спасибо! –

хорошо подлый ошибка там

.dropdown:hover+.dropdown-content { 
    display: block; 
}

.dropdown и .dropdown-content

они братья не родитель ребенка

отступы вашего HTML обманчивы

источник

2016-12-10 10:51:28

хорошо ... редактор сделать это довольно трудно получить идеальный отступы ... по крайней мере для меня ... Спасибо, любой путь! –

Попробуйте codepen ...

На самом деле то, что вы делаете ошибку, это вы должны показать родственную ваш заголовок на парении, что вы делаете, .dropdown:hover .dropdown-content {display: block;} применять стили мы должны использовать +, как tthis .dropdown:hover + .dropdown-content {display: block;}.

надеюсь, что вы понимаете.

источник

2016-12-10 10:54:13

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

ответ

Смежные вопросы