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

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

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

Answer 2

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

CSS 正在寻找 li 中的第一个 ul 徘徊:

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

但是有none，因为你的子菜单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>

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

Why isn't my submenu displaying under my nav element?

html

css

pseudo-class

html-lists

nav