我有一个简单的UL列表，当您将鼠标悬停在下面的HTML中的更多列表项中时，它将取消隐藏它的子菜单并显示它。
我需要做的是在显示和悬停子菜单后更改实际更多CSS的CSS。
所以，如果您将鼠标悬停在更多的子菜单上，您可以将鼠标悬停在该子菜单上。在这一点上，我需要更改这个子菜单的父级的CSS，这将是具有更多文本的菜单。
如果你知道如何做这个没有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>
解决方法
那么，尽管这些其他答案说了这么多，这是一种使用
adjacent selector的鬼鬼祟祟的方式。
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; }
