html - 为什么我的子菜单没有显示在我的导航元素下？

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 Ingredients 的子菜单 ul 子菜单应在悬停时显示在下方。

Answer 1

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

CSS 正在寻找悬停的 li 中的第一个 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>