Comment garder un élément de liste dans l'état actif, tout en planant sur la liste déroulante?

Je suis entrain de créer un menu déroulant sur mon site et avoir plus ou moins achevé la tâche avec succès, à l'exception d'une chose.

Lorsque vous passez la souris sur le menu déroulant, l'état de pointage du menu principal lien disparaît en raison du fait que je ne suis plus planant sur elle.

Comment puis-je garder l'état actif de style sur le lien tout en planant sur les éléments de liste déroulante?

J'ai copié le code de http://cssdesk.com/PZBM2 si vous passez le premier élément de la liste, vous verrez l'état de pointage, je suis en train de parler et la liste déroulante.

Voici le code:

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

OriginalL'auteur hairynuggets | 2012-01-09