无法使用 href 在悬停 li 上更改字体颜色

Question

我想在悬停整个 li 标签时更改字体颜色，而不仅仅是在悬停在 a 标签上。背景颜色应与以前相同(无悬停(找不到错误所在。请帮帮我！谢谢！

nav {
background: #000;
min-height: 85px;
position: fixed;
z-index: 20;
width: 100%;
margin-top: 35px;
transition: 0.35s all ease;
max-width: 1800px;
}
nav ul {
float: right;
text-align: left;
display: inline;
margin: 0;
list-style: none;
padding: 1rem;
transition: 0.35s all ease;
}
nav ul li {
font: 700 18px sans-serif;
margin-right: -4px;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
letter-spacing: 0.1rem;
display: inline-block;
color: white;
padding: 1rem 2rem;
text-transform: uppercase;
/*font-family: sans-serif;*/
}
nav ul li a:hover {
color: #BD1521;
transition: 0.35s all ease;
}
nav ul li:hover {
color: #BD1521;
transition: 0.35s all ease;
}
nav ul li a {
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #fff;
}

<nav>
<a href="index.html"><img class="logo" src="assets/svg/logo-foddis-inverse.svg"></a>
<ul id="menu">
<li>Leistungen
<ul class="dropdown">
<li><a href="#">Reparatur &amp; Instandsetzung</a></li>
<li><a href="#">Lackierung &amp; Folierung</a></li>
<li><a href="#">Restauration &amp; Sonderumbau</a></li>
<li><a href="#">Autoglas &amp; Folie</a></li>
<li><a href="#">Fahrzeugaufbereitung</a></li>
<li><a href="#">Service Plus</a></li>
</ul>
</li>
<li>Über Uns
<ul class="dropdown">
<li><a href="#">Unternehmen</a></li>
<li><a href="#">Unser Team</a></li>
<li><a href="#">Karierre</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">AGB's</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
<li><a href="#"><button class="nav_button"><span>Angebote</span></button></a></li>
<li class="subbar" style="padding-top: 5px;"><i class="fa fa-clock-o" aria-hidden="true" style="padding-right:10px;"></i>Öffnungszeiten: 9:00-18:00 Uhr</li>
<li class="subbar"><i class="fa fa-phone" aria-hidden="true" style="padding-right:10px;"></i>176 311 81 41 8</li>
<li class="subbar"><a href="mailto:[e-mail]"><i class="fa fa-envelope" aria-hidden="true" style="padding-right:10px;"></i>[e-mail]</a></li>
</ul>
</nav>

Answer 1

您需要专门更改li:hover上的锚color。

nav ul li:hover a {
color: #BD1521;
transition: 0.35s all ease;
}