Как сохранить все родителя, за исключением первого LI подсвечивается, когда к югу LI наведен над

Question

HTML:

<ul id="ulMenu"> 
    <li class="parent"> 
     <a href="">Software Update</a> 
     <ul class="ulSubMenu"> 
      <li> 
       <a href="">2010</a> 
       <ul class="ulSubMenu"> 
        <li> 
         <a href="">Version 1</a> 
         <ul class="ulSubMenu"> 
          <li><a href="">Ver 1 Complete</a></li> 
          <li><a href="">Ver 1 Not Yet</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="">2011</a> 
       <ul class="ulSubMenu"> 
        <li> 
         <a href="">Version 1</a> 
         <ul class="ulSubMenu"> 
          <li><a href="">Ver 1 Complete</a></li> 
          <li><a href="">Ver 1 Not Yet</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS:

ul.ulSubMenu > li > a:hover 
{ 
     background-color: #008AAC; 
     color: #C5F3FF; 
} 
.active { 
    background-color: #008AAC; 
    color: #C5F3FF; 
} 

JQuery:

Я хотел бы добавить скрипт, который устанавливает любой родительский LI в класс подменю до active, за исключением родителя LI

Например, если я нахожу «Ver 1 Complete» в разделе 2010 года, он изменит стиль с помощью hover css. Я также хотел бы сделать тот же стиль с классом active для версии 1 и 2010 LI.

Как это сделать.

Answer 1

Я обновил свой CSS к следующим:

ul.ulSubMenu > li > a { 
    text-decoration: none; 
    background-color: #C5F3FF; 
    border: 1px solid #53E1FF; 
    border-top: none; 
    color: #008AAC; 
    display: block; 
    font-size: 12px; 
    line-height: 15px; 
    padding: 10px 12px; 
    cursor: pointer; 
} 

ul.ulSubMenu > li:hover 
{ 
    background-color: #008AAC; 
    color: #C5F3FF; 
} 
ul.ulSubMenu > li:hover > a 
{ 
    color: #C5F3FF; 
    background-color: #008AAC; 
} 

Answer 2

Вы должны просто изменить свое правило .active для применения ко всем li элементам, которые парят.

ul.ulSubMenu li:hover, 
.active { 
    background-color: #008AAC; 
    color: #C5F3FF; 
} 

Это должно работать, как вы хотите, потому что при наведении мыши на элемент, все его родители колебались, а также.