当我将鼠标悬停在导航菜单的黄铜部分时，我希望能够将鼠标悬停在其中的每个项目上，并单独拥有背景颜色，而不是全部放在一起。我的问题是，当我悬停在黄铜部分，整个块有一个背景颜色，而不是通过一个部分在一次。
*{
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 {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.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 a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<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></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Additional Equipment</a></li>
<li><a href="#"><i class="fas fa-toolbox"></i>Maintenance</a></li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>看来您的主要问题是未能关闭您的<li>在"黄铜";线。我还注意到你的格式中有一些小错误。HTML非常依赖于正确的格式，所以请确保将来这样做。我建议在IDE编辑器上使用一个小部件来允许自动格式化。
*{
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 {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.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 a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
.wrapper .sidebar ul.sub-menu li a:hover {
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<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 class="sub-menu">
<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></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Percussion</a></li>
<li><a href="#"><i class="fas fa-angle-double-right"></i>Additional Equipment</a></li>
<li><a href="#"><i class="fas fa-toolbox"></i>Maintenance</a></li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>您可以将悬停设置为您的anchor | a元素:
.wrapper .sidebar ul li > a {
display: block;
padding: 15px;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover > a {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover > a {
color: #fff;
}