Выпадающее меню чистого CSS

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

Я пытаюсь создать 100% выпадающее меню CSS и HTML, подобное тому, что видно на http://phpbb.com. При наведении курсора мыши на навигационные ссылки новый div появляется чуть ниже того, на который вы наводили курсор.

То, что я пытаюсь сделать, это сделать так, чтобы .submenu оно отображалось чуть ниже того, в <li> которое оно вложено, с помощью #nav li a:hover submenu { . Насколько мне известно, этот селектор CSS должен выбирать .submenu DIV при наведении курсора на a элемент? Но это не работает.

 #nav {
  list-style-type: none;
  margin: -5px 0px 0px 5px;
}
#nav li {
  display: inline;
}
#nav li a {
  display: block;
  padding: 3px;
  float: left;
  margin: 0px 10px 0px 10px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  position: relative;
}
#nav li a:hover {
  text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
  display: block;
  color: red;
}
.submenu {
  position: absolute;
  display: none;
}

 <ul id="nav">
  <li><a href="/">Home</a>
  </li>
  <li>
    <a href="/">Skins</a>
    <div class="submenu">
      hello :)
    </div>
  </li>
  <li><a href="/">Guides</a>
  </li>
  <li><a href="/">About</a>
  </li>
</ul>

Ответ №1:

Ваш предпоследний селектор ищет элемент «submenu», вы должны исправить это, чтобы сказать «.submenu»

Вот так:

 /*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
  display: block;
  color: red;
}

Редактировать:

Чтобы заставить наведение работать, вам также необходимо настроить свой CSS таким образом, чтобы наведение применялось к элементу списка, а не к тегу привязки:

 #nav li:hover .submenu {
  display: block;
  color: red;
}

1. Ах да, .submenu является дочерним элементом li, а не a.

2. Идеально, это работает, когда я добавляю указатель мыши к элементу списка. Спасибо! 🙂

3. @Josh — Не забудьте отметить в качестве ответа, помогло ли это, нажав на зеленую галочку 🙂

Ответ №2:

Вам не хватает точки (‘.’) перед подменю в селекторе #nav li a:hover submenu ?

Ответ №3:

Попробуйте отредактировать следующую часть. Поставьте . (точку) перед подменю, поскольку это класс.

 #nav li a:hover .submenu {
display: block;
color: red;
}

Ответ №4:

 #nav li:hover .submenu {
    display: block;
    color: red;
}

Вы хотите, чтобы подменю отображалось при наведении курсора мыши на li, а не на a, просто потому, что у вас нет элементов с подменю class внутри a.

Также вы могли бы рассмотреть возможность использования s для подменю.