如何讓列表項保持活動狀態，同時在下拉菜單上懸停？

Question

我在我的網站上創建了一個下拉菜單，除了一件事情之外，我已經或多或少地完成了任務。

當懸停在下拉菜單上時，主菜單鏈接的懸停狀態消失，因爲我不再徘徊在其上。

如何在鏈接懸停在下拉項目上時保持活動狀態樣式？

我已將代碼複製到http://cssdesk.com/PZBM2如果您懸停第一個列表項，您將看到我正在討論的懸停狀態和下拉列表。

這裏的代碼也：

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

就應該更換

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:hover{ 
    text-decoration:underline !important; 
    border-top:solid 1px #ccc; 
    border-left:solid 1px #ccc; 
    border-right:solid 1px #ccc; 
} 

在你的CSS。請享用！ :)