CSS实现侧边栏下拉导航菜单无法展示子页面问题求助

• 1. HTML结构错误（核心原因）
  你当前的子菜单<ul>直接放在了父级<li>的外部，你的CSS选择器.wrapper .sidebar ul li:hover ul匹配的是li内部的ul元素，所以永远无法命中到你现在写在li外面的子菜单，hover自然不会生效。
  原来的错误结构：

<li><a href="#"><i class="fas fa-angle-double-right"></i>Brass</a></li>
<ul> <!-- 这个ul在li外面，无法被选中 -->
  <li><a href="trumpet.html">Trumpet</a></li>
  ...
</ul>

正确的结构应该是子ul嵌套在父li内部，放在父li的a标签后面。

• 2. CSS样式逻辑问题
  你给子菜单设置了right: 35%会导致子菜单偏移出可视区域，同时没有给子菜单的li设置独立的样式，会继承父级li的内边距导致显示错乱；另外原有的li:hover a选择器会导致父级li hover时，子菜单所有a标签直接变白，不符合交互逻辑。

修复后的HTML导航部分 #

<ul>
  <li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
  <li>
    <a href="#"><i class="fas fa-angle-double-right"></i>Brass</a>
    <ul>
      <li><a href="trumpet.html">Trumpet</a></li>
      <li><a href="frenchhorn.html">Horn</a></li>
      <li><a href="trombone.html">Trombone</a></li>
      <li><a href="euphonium.html">Euphonium</a></li>
      <li><a href="tuba.html">Tuba</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fas fa-angle-double-right"></i>Woodwind</a>
    <ul>
      <!-- 补充木管类子菜单即可 -->
    </ul>
  </li>
  <li>
    <a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a>
    <ul>
      <!-- 补充打击乐类子菜单即可 -->
    </ul>
  </li>
  <li><a href="#"><i class="fas fa-angle-double-right"></i>Additional Materials</a></li>
  <li><a href="#"><i class="fas fa-toolbox"></i>Maintenance</a></li>
</ul>

调整后的CSS代码 #

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
  background-color: #348899;
}
.wrapper .sidebar {
  position: fixed;
  width: 160px;
  height: 100%;
  background-color: #979C9C;
  color: #343642;
  padding: 20px 0;
}
.wrapper .sidebar h2 {
  text-align: center;
  margin-bottom: 20px;
}
.wrapper .sidebar ul li {
  padding: 15px;
}
/* 修正子菜单样式 */
.wrapper .sidebar ul li ul {
  display: none;
  position: relative;
  left: 10px;
  margin-top: 10px;
}
.wrapper .sidebar ul li:hover ul {
  display: block;
}
/* 新增子菜单独立样式 */
.wrapper .sidebar ul li ul li {
  padding: 8px 15px;
}
.wrapper .sidebar ul li:hover {
  background-color: #B1B6B6;
}
/* 修正hover选择器，只匹配直接子a标签 */
.wrapper .sidebar ul li:hover > a {
  color: #fff;
}
.wrapper .sidebar ul li a .fas {
  width: 20px;
}
.sidebar a {
  text-decoration: none;
  color: #343642;
}

内容的提问来源于stack exchange，提问作者user17138068