Question

我有导航菜单的CSS和HTML代码，正如您可以看到当您将鼠标悬停在其中一个主要链接上时，它会变为橙色。但是当你查看子菜单上的链接时，橙色会消失。

当你进入子菜单链接时，如何保持它以保持橙色？

<ul id="trans-nav">
<li>
<a href="#">About Us</a>
<ul>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/login">Login</a></li>
</ul>
</li>

#trans-nav {
    list-style-type: none; 
    height: 40px; 
    padding: 0; 
    margin: 0;
    position:relative;
    z-index:999;
}
#trans-nav {
    list-style-type: none; 
    height: 40px; 
    padding: 0; 
    margin: 0;
}
#trans-nav li {
    float: left; 
    position: relative; 
    padding: 0; 
    line-height: 40px;
}
#trans-nav li:hover {
    background-position: 0 -40px;
}
#trans-nav li a {
    display: block; 
    padding: 0 15px; 
    color: #666666; 
    text-decoration: none;
}
#trans-nav li a:hover {
    background-color:#F36F25; 
    color: #eeeeee;
}
#trans-nav li ul {
    opacity: 0;
    position: absolute;
    left: 0;
    width: 200px;
    background: #EEEEEE;
    list-style-type: none;
    padding: 0;
    margin: 0; 
}
#trans-nav li:hover ul {
    opacity: 1; 
}
#trans-nav li ul li {
    float: none; 
    position: static; 
    height: 0; 
    line-height: 0; 
    background: none;
}
#trans-nav li:hover ul li {
    height: 30px;
    line-height: 30px;
}
#trans-nav li ul li a {
    background: #EEEEEE;
}
#trans-nav li ul li a:hover {
    background: #666666;
    color:#EEEEEE;
}

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

Answer 1

试试这个：

http://jsfiddle.net/wjy74/

#trans-nav:hover {
 background-color:#F36F25; 
 color: #eeeeee;
 width: 89px;    
}

子菜单的导航菜单不会保持突出显示

1 个答案: