【发布时间】：2014-09-11 00:37:43
【问题描述】：
我有一个顶部菜单栏，当鼠标悬停在每个菜单项上时，它会变成紫色。
其中一个菜单还有一个包含更多项目的下拉列表。当我通过这些子菜单向下移动鼠标光标时，顶部菜单会恢复到原始样式。即使我将鼠标悬停在子菜单项上，我也希望它保持紫色。网站是here，如果您将鼠标悬停在“关于”下的子菜单上，则会显示问题。
我已经搜索了一些类似的 stackoverflow 答案。比如这个问题和previous answer here。我尝试对此进行更改
#topnav li a:hover {}
到
#topnav li hover:a {}
但无论是这个建议的更改还是原来的更改都不会使顶部菜单保持紫色。完整代码如下：
#topnav {
clear: both;
background: url(nav-bg-orange.png) no-repeat;
height: 87px;
width: 962px;
padding: 6px 63px 6px;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 3px 0 0 0;
border-left: 1px dashed #f38739;
}
#topnav ul li:last-child {
border-right: 1px dashed #f38739;
}
#topnav ul li a {
float: left;
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 15px 20px 15px 20px;
border: 0;
outline: 0;
line-height: 1;
list-style-type: none;
text-transform: uppercase;
}
#topnav li#active a,
#topnav li:hover a {
color: #fff;
background: #745b7c;
display:block;
border-radius: 5px 5px 0 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 11px;
color: #fff;
background: #745b7c;
border: 0;
border-bottom: 1px dashed #9e89a4;
}
#wsite-menus .wsite-menu li:hover a {
color: #fff;
background: #8c7395;
}
【问题讨论】：
-
你也可以分享html吗..？
-
你试过
#topnav ul:hover吗？ -
任何 jsfiddle 可用？
-
没有这样的：
#topnav li hover:a {你必须这样写：#topnav li a:hover {}然后尝试 -
@simpe #topnav ul:hover。只是使整个顶部导航行被选中。