вертикальное меню с подменю, но родительские ссылки не остаются активными

Question

Я переработал вертикальное меню с помощью css, как видно из кода ниже, и я не могу заставить первый вариант меню оставаться активным, когда он первая опция подменю и первая и вторая, чтобы оставаться активными, когда в третьем подменю.

Что мне здесь не хватает, пожалуйста?

Я также пытался заставить его работать во всех браузерах с различными хаками. Как я могу заставить его работать для большинства, если не всех браузеров и где существуют ограничения?

Ниже CSS я написал:

#nav li a { 
    display:block; 
    width:250px; 
    height:30px; 
    color:#FFF; 
    background-color: #33b4d4; 
    text-decoration:none; 
    font-size:1em; 
    line-height:1.8em; 
    font-weight:bold; 
    border:1px solid #000; 
    text-indent:20px; 
} 

#nav li a:hover { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
} 

#nav ul.menu { 
    display:block; 
    width:250px; 
    margin:0; 
    padding:0; 
    list-style-type: none; 
} 
#nav ul.menu > li, #nav ul.menu ul > li , #nav ul.menu ul > li > ul > li { 
    float: left; 
    display:block; 
    width:250px; 
    height:30px; 
    background-color: #33b4d4; 
    text-indent:20px; 
} 
#nav ul.menu ul ul li { 
    float: none; 
} 
#nav li > ul { 
    display: none; 
} 
#nav li:hover > ul { 
    position: absolute; 
    display:block; 
    width:250px; 
    padding:0; 
    margin-top:-22px; 
    margin-left:220px; 
} 

А ниже меню:

 <div id="nav"> 
      <ul class="menu"> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li> 
        <a href="/" title="">Home</a> 
        <ul class="sub-menu"> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
         <li> 
          <a href="/" title="">Home</a> 
          <ul class="sub-menu"> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
           <li><a href="/" title="">Home</a></li> 
          </ul> 
         </li> 
         <li><a href="/" title="">Home</a></li> 
        </ul> 
       </li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
       <li><a href="/" title="">Home</a></li> 
      </ul> 

Я попытался изменить:

#nav li a:hover { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
} 

To:

#nav ul.menu > li:hover a { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
} 

Но теперь родительская ссылка остается активной, но все ссылки подменю также активны одновременно. Что мне не хватает?

Answer 1

Вы должны изменить цвет ссылки на li: hover.

#nav li:hover > a { 
    display:block; 
    color:#33b4d4; 
    background-color: #FFF; 
} 

JSFiddle