Почему мое подменю не отображается под элементом навигации? - PullRequest
Новая
       70

Почему мое подменю не отображается под элементом навигации?

0 голосов
/ 25 апреля 2019

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

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

<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 of li Ingredients должно отображаться внизу при наведении.

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Подменю не отображается при наведении, потому что ваш 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>
0 голосов
/ 25 апреля 2019

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

...