Блог

Я использую книгу Murach HTML5 / CSS3 для проекта и получил двухуровневое навигационное меню, которое работает в соответствии с предыдущими инструкциями. Однако использование того же метода, что и в книге, похоже, не работает в этом случае. Предполагается, что навигация представляет собой горизонтальное меню и вертикально выровненное подменю при наведении курсора мыши.

Я попытался исключить другие таблицы стилей и несколько комбинаций изменения отображаемых свойств различных селекторов.

 <nav id="nav_menu">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="nav/ingredients.html">Ingredients</a></li>
    <ul>
      <li><a href="nav/fish.html">Fish</a></li>
      <li><a href="nav/vegetables.html">Vegetables</a></li>
      <li><a href="nav/condiments.html">Condiments</a></li>
      <li><a href="nav/others.html">Others</a></li>
   </ul>
    <li><a href="nav/history.html">History</a></li>
    <li><a href="nav/trivia.html">Trivia</a></li>
    <li><a href="nav/types.html">Types</a></li>
</ul>
  

 #nav_menu {
clear: left;
}

#nav_menu ul {
list-style: none;
position: relative;
width: 100%;
}

#nav_menu ul li {
float: left;
width: 20%;
}

#nav_menu ul li a {
text-align: center;
padding: .7em 0;
background-color: #5a5a5a;
font-weight: bold;
color: white;
text-decoration: none;
}

#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}

#nav_menu ul ul li {
float: none;
}

#nav_menu ul li:hover > ul {
display: block;
}


#nav_menu > ul:after {
content: "";
display: block;
clear: both;
}

#nav_menu a:hover {
background-color: crimson;
color: black;
}

#nav_menu ul li a.current {
color: black;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
background-color: crimson;
}
  

Дочернее подменю ul для li Ingredients должно отображаться под ним при наведении курсора мыши.

Подменю не отображается при наведении курсора мыши, потому что ваш CSS не может найти это подменю.

CSS ищет первый ul в наведенном:

     #nav_menu ul li:hover > ul {
    display: block;
    }
  

Но его нет, поскольку ваше подменю ul следует за li и не находится внутри in.

     <li><a href="nav/ingredients.html">Ingredients</a></li>
    <ul>
  

Если вы измените HTML, ваш CSS заработает:

     <li><a href="nav/ingredients.html">Ingredients</a>
    <ul>
      <li><a href="nav/fish.html">Fish</a></li>
      <li><a href="nav/vegetables.html">Vegetables</a></li>
      <li><a href="nav/condiments.html">Condiments</a></li>
      <li><a href="nav/others.html">Others</a></li>
   </ul></li>
  

Пожалуйста, посетите https://www.w3schools.com/howto/howto_css_dropdown.asp это ссылка на w3schools, которая делает именно то, что вам нужно, используя чистый CSS и HTML в соответствии с вашими потребностями.