悬停CSS列表项时,更改父项CSS

Question

我有一个简单的UL列表,当您将鼠标悬停在More下面的HTML列表项中时,它会取消隐藏它的子菜单并显示它.

我需要做的是在More显示和悬停子菜单后更改实际CSS的CSS.

因此,如果您将鼠标悬停在More子菜单上,则可以将鼠标悬停在该子菜单上.此时我需要更改此子菜单的Parent的CSS,这将是具有More文本的菜单.

如果你知道如何在没有Javascript的情况下做到这一点,我很想知道......如果没有JS可能甚至不可能？

 <div id="nav-wrapper">
        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>
                <ul>
                    <li><a href="">Sub Link 1</a></li>
                    <li><a href="">Sub Link 2</a></li>
                    <li><a href="">Sub Link 3</a></li>
                    <li><a href="">Sub Link 4</a></li>
                    <li><a href="">Sub Link 5</a></li>
                </ul>
            </li>

        </ul>
    </div>

CSS

<style type="text/css" media="screen">
#nav-wrapper ul {
    position:relative;
    width: 700px;
    float: right;
    margin: 0;
    list-style-type: none;
}
#nav-wrapper ul li {
    vertical-align: middle;
    display: inline;
    margin: 0;
    color: black;
    list-style-type: none;
}
#nav-wrapper ul li a {
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    font-size: 13px;
    color: #666;
    padding: 5px 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#nav-wrapper ul li a:hover {
    color: #fff;
    background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
    color: #666;
}

/* Hide Sub-menus */
#nav-wrapper ul ul{
    display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
    display: block;
    margin:-10px 0 0 0;
    padding:0px 20px 20px 20px;
    border-color:#fff;
    border:1px;
    border-style:solid;
    background:#FFF;
    position:absolute;

    top:45px;
    right: 320px;
    width: 420px;
}

</style>

Answer 1

好吧,尽管这些其他答案都说,这里有一种偷偷摸摸的方式来使用相邻的选择器.

HTML:

<ul>
    <li>
        <ul>
            <li>Sub Link 1</li>
            <li>Sub Link 2</li>
            <li>Sub Link 3</li>
        </ul>
        <a href="#">Menu</a>
    </li>
</ul>

CSS:

* { 
    margin: 0; 
    padding: 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul li a { 
    height: 16px;
    display: block; }
ul ul { 
    position: absolute;
    top: 16px;
    left: 0;
    cursor: pointer;
    display: none; }
ul li:hover ul { display: block; }
ul ul:hover + a { color: red; }

预览:http://jsfiddle.net/Wexcode/YZtgL/

Answer 2

老问题,接受的答案很聪明.但是实现这一点非常简单,只需对CSS进行一次更改即可:

#nav-wrapper ul li a:hover

至:

#nav-wrapper ul li:hover>a

这在IE6中不起作用(该浏览器只能理解锚点上的悬停样式).但是,相邻的兄弟组合选择器(+)也没有.

请参阅此jsFiddle以了解修复操作