html - CSS 下拉菜单 - 子菜单悬停文本颜色继承

Question

我一直在研究 css 下拉菜单，但在子菜单文本颜色方面苦苦挣扎。

正如预期的那样，子菜单背景颜色保持悬停颜色，但文本恢复为非悬停状态。

例如，当悬停元素 9 时，我需要“菜单、元素 3 和元素 6”中的文本与元素 9 相同(白色)。

我认为这是一个继承问题，但似乎无法弄清楚。

这是CSS

.clearboth {
    margin: 0;
    padding: 0;
    clear: both;
}
#nav {
    font-family: sans-serif;
    font-size: 12pt;
    color: #666666;
    line-height: 1.0;
}
#nav a {
    display: block;
    padding: 6px 8px;
}
#nav a:link {
    color: #666666;
    text-decoration: none;
}
#nav a:visited {
    color: #666666;
    text-decoration: none;
}
#nav a:hover {
    color: white;
    text-decoration: none;
}
#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    left: -1px;
}
#nav ul ul {
    position: absolute;
    visibility: hidden;
    border: solid 1px gray;
}
#nav ul ul ul {
    position: absolute;
    visibility: hidden;
    left: 100%;
    top: -2px;
    border: solid 1px gray;
}
#nav li.menu {
    float: left;
    background-color: white;
    margin-right: 0px;
    position: relative;
    border: solid 1px gray;
    border-radius: 10px;
    width: 100px;
    text-align: center;
}
#nav li.menu:hover {
    background-color: #66a3e0;
    border-radius: 0px;
    text-align: left;
}
#nav li {
    float: left;
    position: relative;
    background-color: white;
    width: 100px;
    margin-top: 0px;
    margin-right: 0px;
}
#nav li li {
    float: left;
    position: relative;
    background-color: white;
    width: 100px;
    margin-top: 0px;
    margin-right: 0px;
}
#nav li:hover {
    background-color: #66a3e0;
    color: white; /* No effect. Inheritance? */
}
#nav li li:hover {
    background-color: #66a3e0;
    color: white; /* No effect. Inheritance? */
}
#nav li:hover > ul {
    visibility: visible;
}
.right-arrow {
    float: right;
}

和 HTML

<div id="nav">
    <ul>
        <li class="menu"><a href="#">Menu</a>

            <ul>
                <li><a href="#">Item 1</a>
                </li>
                <li><a href="#">Item 2</a>
                </li>
                <li><a href="#">Item 3<span class="right-arrow">&#9658;</span></a>

                    <ul>
                        <li><a href="#">Item 4</a>
                        </li>
                        <li><a href="#">Item 5</a>
                        </li>
                        <li><a href="#">Item 6<span class="right-arrow">&#9658;</span></a>  
                            <ul>
                                <li><a href="">Item 7</a>
                                </li>
                                <li><a href="">Item 8</a>
                                </li>
                                <li><a href="">Item 9</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br class="clearboth" />
</div>

如有任何帮助、想法或其他建议，我们将不胜感激。谢谢。

http://jsfiddle.net/tinkering/WD7xY/

Answer 1

添加

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{
    color:white;
}

演示:http://jsfiddle.net/EB97N/