Come mantenere la voce dell'elenco in stato attivo mentre si passa con il mouse sull'elenco a discesa?

Question

Sto creando un menu a discesa sul mio sito Web e ho completato più o meno l'operazione con successo a parte una cosa.

Quando si passa con il mouse sul menu a discesa, lo stato di passaggio del mouse sul collegamento del menu principale scompare perché non ci si passa più sopra.

Come è possibile mantenere lo stile di stato attivo sul collegamento mentre si posiziona il puntatore del mouse sugli elementi a discesa?

Ho copiato il codice in http://cssdesk.com/PZBM2 se si passa il mouse sulla prima voce dell'elenco si vedrà lo stato al passaggio del mouse di cui sto parlando e il menu a discesa.

ecco il codice anche:

/*Main nav*/ 
.main_nav_container{ 
    margin-top:10px; 
    margin-bottom:10px; 
    display:block; 
    float:right; 
} 
ul.main_nav{ 
    margin:0; 
    padding:0; 
} 
ul.main_nav li{ 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 
ul.main_nav li a{ 
    font-size:13px; 
    display:block; 
    font-weight:bold; 
    position:relative; 
    height:25px; 
    line-height:25px; 
    padding:0 13px; 
    text-decoration:none; 
    color:#1122cc; 
    border:1px solid transparent; 
} 
ul.main_nav li a:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 
ul.main_nav li ul{ 
    display:none; 
    position:absolute; 
    background: #fff; 
    margin:0; 
    padding:0; 
    border:solid 1px #ccc; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
} 
ul.main_nav li ul:hover #hover{ 
    border:#ccc 1px solid; 
} 
ul.main_nav li ul li{ 
    display:block; 
    margin:0; 
    padding:0; 
    text-align:left; 
} 
ul.main_nav li ul li a{ 
    font-weight:normal; 
} 
ul.main_nav li:hover ul{ 
    display:inline; 
} 

HTML

<div class="main_nav_container"> 
    <ul class="main_nav"> 
     <li> 
      <a id="hover" href="#">For sale</a> 
      <ul> 
       <li><a href="#">Property for sale</a></li> 
       <li><a href="#">New homes for sale</a></li> 
       <li><a href="#">Find estate agents</a></li> 
      </ul> 
     </li> 
     <li><a href="#">To rent</a></li> 
     <li><a href="#">New homes</a></li> 
     <li><a href="#">House prices</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Property advice</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

Answer 1

è necessario sostituire

ul.main_nav li a:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 

con

ul.main_nav li:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 

nel tuo css. Godere! :)