Làm cách nào để giữ mục danh sách ở trạng thái hoạt động trong khi di chuột trên menu thả xuống?

Question

Tôi đang tạo một menu thả xuống trên trang web của mình và đã hoàn thành nhiều tác vụ thành công ngoài một điều.

Khi lơ lửng trên menu thả xuống, trạng thái di chuột của liên kết menu chính biến mất do thực tế là tôi không còn lơ lửng trên đó nữa.

Làm cách nào để giữ kiểu trạng thái hoạt động trên liên kết trong khi di chuột trên các mục thả xuống?

Tôi đã sao chép mã thành http://cssdesk.com/PZBM2 nếu bạn di chuột qua mục danh sách đầu tiên, bạn sẽ thấy trạng thái di chuột tôi đang nói đến và menu thả xuống.

Đây là mã thêm:

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

bạn nên thay thế

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

với

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

trong css của bạn. Thưởng thức! :)