下拉菜单内容悬停颜色

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