为什么我的子菜单不在我的nav元素下显示？

Question

我正在使用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;
}

li成分的子菜单应在悬停时显示在下面。

Answer 1

悬停时不显示子菜单，因为您的CSS无法找到子菜单。

CSS正在寻找l h中的第一个ul：

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

但是没有，因为你的子菜单跟随li并且不在其中。

    <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>

Answer 2

请访问https://www.w3schools.com/howto/howto_css_dropdown.asp这是w3schools链接，它可以根据您的需要使用纯CSS和HTML完全满足您的需求。