html - サブメニューが強調表示されていないナビゲーション メニュー

Question

メイン リンクの 1 つにカーソルを合わせるとオレンジ色になることがわかるように、ナビゲーション メニュー用にこの 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;    
}