我有一个简单的UL列表,当你将鼠标悬停在下面超文本标记语言中的More
列表项上时,它会取消隐藏它的子菜单并显示它。
我需要做的是改变实际的More
的CSS的CSS的子菜单是显示和悬停。
因此,如果将鼠标悬停在More
上,子菜单将变为可见,然后将鼠标悬停在该子菜单上。此时,我需要更改该子菜单的父菜单的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>
发布于 2011-12-24 12:26:37
好吧,不管其他答案怎么说,这里有一种使用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; }
发布于 2013-08-07 20:11:19
老问题,公认的答案是聪明的。但要实现这一点非常简单,只需对CSS进行如下更改:
#nav-wrapper ul li a:hover
至:
#nav-wrapper ul li:hover>a
这在IE6中是行不通的(浏览器只能识别锚点上的悬停样式)。但随后相邻的同级组合符选择器(+)也不会。
有关实际修复的信息,请参阅this jsFiddle
发布于 2011-12-24 12:16:21
不能在CSS中选择父元素。你需要javascript/jQuery来完成你想要的。
https://stackoverflow.com/questions/8622611
复制相似问题