CSS菜单 - 当焦点在子节点上时，父节点中的活动链接更改颜色 [英] CSS Menu - active link in parent node changing color when focus is on child node

问题描述

我有一个CSS垂直菜单我创建的代码如下。 （测试页位于 http://www.candyundies.com/test.php ）。

I have a CSS vertical menu I have created code is below. (Test page is located at http://www.candyundies.com/test.php).

我的问题是当你将鼠标移到子菜单时，父节点中突出显示的li将变回到非悬停颜色（＃297BCE）。我想要它保持白色（#FFF）就像它是当你徘徊。我一直疯了，试图找到我做错了。任何想法我错过了什么？

My problem is when you mouse over to the sub menu, the highlighted 'li' in the parent node is changing back to the non hover color (#297BCE). I am wanting it to stay white (#FFF) like it is when you hover. I have been going crazy trying to find what I'm doing wrong. Any ideas what I'm missing?

<style>
#categories {
 background-color:#297BCE;
 width:214px;
 height:37px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
  position:absolute;
  top:67px;
  padding-top:10px;
  z-index:3;
  font: bold 15px Arial, sans-serif; color:#FFFFFF;
 }
#navigation {  position:absolute;font-size:0.75em; width:214px;top:115px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */
ul.top-level {background:#fff;}
ul.top-level li {
 font-family: arial, sans-serif;
 font-size:14px;
 font-weight:bold;
 border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5;
background:#fff url(images/arrow.gif) no-repeat center right;
}
/* FIRST LEVEL TEXT COLOR */
#navigation a {
 display:block;
 color: #297BCE;
 cursor: pointer;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:214px;
}
/* FIRST LEVEL TEXT HOVER COLOR */
#navigation a:hover{
 color: #FFF;
 text-decoration:none;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR */
#navigation li:hover {
 background-color:#297BCE;
 position: relative;
}
#navigation li{
 background-color:#FFF;
 position: relative;
}
/* SECOND LEVEL TEXT SETTINGS */
ul.sub-level li a{
    font-family: arial, sans-serif;
    font-size:12px;
    font-weight:normal;
    background-color:#FFF;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    position: absolute;
    display: block;
    background: #FFF;
    border: #A5A5A5 solid;
    border-width: 1px;
/* set the sub menu flyout position here */
    left: 207px;
    top: -15px;
    z-index:10;
}
/* SECOND LEVEL TEXT HOVER COLOR */
#navigation ul li ul li a:hover{
 color:#f90;
 background-color:#FFF;
 text-decoration:underline;
}
#navigation ul ul{
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
     box-shadow: 0px 3px 10px #B0B0B0;
}
#navigation ul li ul li a{
 text-indent: 20px;
 line-height: 17px;
}
ul.sub-level li {
    background:#fff;
    border:1px solid #D2D2D2;
    border-color:#FFF #FFF #FFF #FFF;
    float:left;
}
</style>

<div id="categories">See All Categories</div>
<div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">FAQ</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>  

推荐答案

您需要将白色应用于当第一层li被徘徊时，子链接。所以使用子选择器语法（>）

You need to apply the white color to only the immediate child link when the 1st level li is hovered. So use the child selector syntax (>)

将此声明添加到您的CSS：

Add this declaration to your CSS:

#navigation li:hover > a{
    color:#fff;
}

请参阅：
http://jsfiddle.net/MVKLC/

用于实施

See: http://jsfiddle.net/MVKLC/
for implementation

这篇关于CSS菜单 - 当焦点在子节点上时，父节点中的活动链接更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！