我的简单水平导航栏有一个特定问题。当我为整个 ul 设置背景颜色时，我只会对文本进行悬停更改，而不会对背景进行更改。我试过设置 li:hover 和 a:hover 但一切都一样。例如，当我为 background-color 属性（黑色、红色...）设置不同的颜色时，一切都很好，但是使用 rgba 值它在大于 600px 的屏幕上不起作用。正如我所见，我希望对两者都有相同的效果，并且只设置不同的颜色会产生问题。有人可以告诉我我的错误在哪里，我该如何解决？
这是我的代码
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and …