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

【问题标题】：Why isn't my submenu displaying under my nav element?为什么我的子菜单没有显示在我的导航元素下？
【发布时间】：2019-09-14 09:51:57
【问题描述】：

我在一个项目中使用 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 的子菜单在悬停时应显示在下方。

【问题讨论】：

标签： html css html-lists nav pseudo-class

【解决方案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>

【讨论】：

非常感谢！！我一直在找错地方。

【解决方案2】：

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

【讨论】：