CSS菜單幫助 - 子/父問題

Question

我在joomla模板中有一個菜單，當您懸停鏈接時，鏈接將突出顯示。我想知道如何讓父母在懸停在子女（子菜單）時保持這種狀態。

我當前的代碼：HTML

<div id="navigation">        
<ul class="menu "> 
<li class="item-101 current active"> 
<a href="/" ><span class="menutitle">Home</span><span class="menudesc"></span></a></li> 
<li class="item-107 deeper parent"><a href="/index.php/jamie" ><span class="menutitle">Jamie</span> <span class="menudesc"></span><i class="icon-angle-down"></i></a> 
<ul class="sub-menu"><li class="item-108"><a href="/index.php/jamie/photos" ><span class="menutitle">Photos</span> <span class="menudesc"></span></a></li> 
<li class="item-109"><a href="/index.php/jamie/thoughts" ><span class="menutitle">Thoughts</span> <span class="menudesc"></span></a></li></ul></li> 
<li class="item-110"><a href="/index.php/mike" ><span class="menutitle">Mike</span> <span class="menudesc"></span></a></li> 
<li class="item-111"><a href="/index.php/john" ><span class="menutitle">John</span> <span class="menudesc"></span></a></li> 
<li class="item-112 deeper parent"><a href="/index.php/carrie" ><span class="menutitle">Carrie</span> <span class="menudesc"></span><i class="icon-angle-down"></i></a> 
<ul class="sub-menu"><li class="item-113"><a href="/index.php/carrie/pictures" ><span class="menutitle">Pictures</span> <span class="menudesc"></span></a></li> 
<li class="item-114"><a href="/index.php/carrie/thoughts" ><span class="menutitle">Thoughts</span> <span class="menudesc"></span></a></li> 
<li class="item-115"><a href="/index.php/carrie/makeup" ><span class="menutitle">Make-up</span> <span class="menudesc"></span></a></li> 
<li class="item-116"><a href="/index.php/carrie/books" ><span class="menutitle">books</span> <span class="menudesc"></span></a></li></ul></li> 
<li class="item-117"><a href="/index.php/contact" ><span class="menutitle">Contact</span> <span class="menudesc"></span></a></li></ul> 
</div> 

的CSS：

/* Navigation */ 
#navbar-wrap { padding: 0px; margin:0 0 10px 0; float:right!important} 
#navbar { height: 55px; } 
#navbar.row { margin-bottom: 0 } 
#navigation { padding:0 10px;} 
#navigation ul.menu { float:right} 
#navigation .menu { margin: 0; padding: 0; list-style: none;} 
#navigation .menu .icon-angle-right { position: absolute; right: 10px; top: 50%; margin-top: -6px; color: #aaa; font-size: 12px; } 
#navigation .menu > li { display: block; float: left; } 
#navigation .menu > li ul {} 
#navigation .menu ul { position: absolute; left: 0; top: 100%; margin: 10px 0 0 0; /*IE6 only*/ _margin: 0; nowhitespace: afterproperty; opacity: 0; transition: all .2s ease-in-out; visibility: hidden; z-index: 99; } 
#navigation .menu ul ul { left: 100%; top: 0; } 
#navigation .menu ul ul li { width: 100% } 
#navigation .menu li { position: relative } 
#navigation .menu li:hover > ul { margin: 0; opacity: 1; visibility: visible; } 
#navigation .menu a { display: block; position: relative; padding: 20px 10px 0 10px; font-family:'Oswald',Arial, Helvetica, sans-serif;} 
/* current item */ 
#navigation .menu > li > a:hover, #navigation .menu > li.sfHover > a, #navigation .menu > .active > a, #navigation .active > a:hover, #navigation .active > a:hover{ color: #fff; background:#67ABC9;} 
#navigation .menu > .active > a, #navigation li.active > a {color: #fff } 
#navigation .menu > li { margin-right: 5px; padding:0; } 
#navigation .menu a { height: 55px; color: #606060; font-weight: 400; text-align: left; text-decoration: none; cursor: pointer; line-height: 55px; font-size:16px; } 
/*drop-down styles*/ 
#navigation .menu ul { border-top: none; background: #F5F5F5; border: 1px solid #ccc; min-width:200px; 
box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2)} 
#navigation .menu li:hover ul { margin-top: 0; } 
#navigation .menu ul ul.sub-menu { margin-top: -1px; margin-left: 1px; } 
#navigation .menu ul li { border-bottom: 1px solid #ccc } 
#navigation .menu ul li:first-child { } 
#navigation .menu ul li:last-child { border: 0 } 
#navigation .menu ul li > a:hover { color: #67ABC9; background:none;} 
#navigation .menu ul a { display: block; height: auto; margin: 0px; padding: 12px 15px; text-transform: none; border: 0px; line-height: 1.7em; } 
#navigation .selector { display: none } 
#navigation ul.sub-menu .icon-angle-down:before {content:"\f105"!important;} 
#navigation ul.sub-menu a { font-size:12px;} 
#navigation ul.sub-menu .active > a { color:#67ABC9} 
#navigation i { text-align:right} 
#menu-icon {display: none;} 
#slide-wrap a:hover{ color:#fff} 

Answer 1

你的樣式表很混亂，你有相同的選擇器有很多不同的規則，加入它們;並刪除未使用的。

我已經清洗了第一部分，自己完成清洗。

關於你的問題，基本上你需要

#navigation > .menu > .active > a, 
#navigation > .menu > li:hover > a{ 
    color: #fff; 
    background:#67ABC9; 
} 

注意使用li:hover > a代替li> a:hover。

Demo

Answer 2

我認爲這是你正在尋找的解決方案。 http://jsfiddle.net/pzaF8/

#navigation .menu > LI:hover{background-color: #67ABC9; color: #FFF} 

我只添加這塞上你的CSS，我didn`t編輯你的事業看起來凌亂。