¿Cómo mantener el elemento de la lista en estado activo mientras se cierne sobre el menú desplegable?

Question

Estoy creando un menú desplegable en mi sitio web y he completado más o menos la tarea con éxito aparte de una cosa.

Al pasar el ratón sobre el menú desplegable, el estado de desplazamiento del enlace del menú principal desaparece debido a que ya no estoy sobre él.

¿Cómo puedo mantener el estilo de estado activo en el enlace mientras se cierne sobre los elementos desplegables?

He copiado el código a http://cssdesk.com/PZBM2 si pasa el primer elemento de la lista, verá el estado de desplazamiento del que hablo y el menú desplegable.

Este es el código también:

/*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

se debe reemplazar

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; 
} 

en su css. ¡Disfrutar! :)