下拉菜单内容悬停颜色

Question

我正在创建一个网站，并希望将鼠标悬停在背景颜色上。我有一个下拉按钮可以更改颜色，但是当我将鼠标悬停在下拉菜单上时，无法更改下拉菜单中的链接。

Answer 1

下面是HTML和CSS，我甚至将鼠标悬停在主菜单上以显示子菜单-主页，关于和联系方式。希望它对\ m /

有帮助

<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;
}