下拉菜单内容悬停颜色

Question

我正在创建一个网站，想做一个带有悬浮背景色的下拉菜单。我已经让下拉按钮改变了颜色，但我不能让下拉菜单内的链接在我悬停时改变颜色。

Answer 1

下面是HTML和CSS，我甚至做了主按钮 "MENU "在悬停时显示子菜单 - 首页，关于和联系。希望能帮到你

<nav role="navigation">
    <ul>
        <li><a href="#">Menu</a>
            <ul class="dropdown">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>
    </ul>

现在是CSS代码

a{
text-decoration: none;
}

ul{
list-style: none;
}

li{
color: #fff;
background:  black; 
padding: 1rem;
position: relative;  
}

li a {
color: White;
}

li:hover {
background: Red;
}

ul li ul {
opacity: 0;
min-width: 5rem;
position: absolute;  
}

ul li ul:hover {
opacity: 1;
display: block;
}