0

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

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

我一直在尝试将所有内容都color:放在悬停链接上的文字上，但没有任何乐趣。

这是我的小提琴

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

1 回答 1

3

您需要将悬停添加到 li

nav ul li:hover a {
    color:white;
}
于 2012-12-06T15:52:58.117 回答