Question

问题是当您离开<a>时，字体颜色将恢复为其非悬停颜色。

即使光标离开“关于”链接，我希望“关于”文本的颜色为白色。

我一直试图将所有color:放在我悬停链接上的文字上，但没有快乐。

这是我的 fiddle

HTML

 <nav>
    <ul>
        <li class="n1">
            <a href="#">Home</a>
        </li> 
        <li class="n2">
            <a href="#">About</a>
            <ul class="menu">
                <li>
                    <a href="#">List 1</a>
                </li>
                <li>
                    <a href="#">List 2</a>
                </li>
                <li>
                    <a href="#">List 3</a>
                </li>
            </ul>
        </li> 
        <li class="n3">
            <a href="#">Contact</a>
        </li>        
    </ul>
</nav>

CSS

nav {
    width 100%;
}

nav ul {
    list-type: none;
}

nav ul li {
    maring: 0;
    padding: 0;
}

nav ul li a {
    display: block;
    float: left;
    padding: 10px 20px;
    line-height: 1;
    color: dodgerblue;
    background: silver;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul li a:hover {
    color: white;
}

nav ul li.n2:hover > .menu {
    display: block;
}

.menu {
    position: absolute;
    top: 36px;
    left: 86px;
    background: silver;
    width: 93px;
    display: none;
}

.menu li a {
    color: white;
}

.menu li a:hover {
    color: dimgray;
}

Answer 1

您需要将悬停添加到li

nav ul li:hover a {
    color:white;
}

保持文本白色悬停在下拉菜单上

1 个答案: