下拉菜單css不工作，內部div不顯示

Question

當懸停在Choose Location上時，應顯示div adv_cities，我可以導航adv_cities菜單。我試過的是不行的。

<div class="header_top_location"> <ul id="city_nav" class="city_nav menu"> 
      <li class="mega"><a href="#">Choose Location</a> 
       <div class="adv_cities" id="adv_cities" style="display:none"> 
       <ul><li>London</li> 
         <li>Bristol</li> 
         <li>Manchester</li> 
         <li>Kent</li> 

      </ul> 
       </div> 
      </li> 
     </ul> 

     </div> 

的CSS

.header_top_location .mega > a:hover + .adv_cities, .header_top_location .adv_cities:hover .adv_cities{ 
    display:block !important; 
} 
.header_top_location .adv_cities { 
    background-color:#fff 
} 
.header_top_location .adv_cities ul{ 
    overflow:hidden; 
} 
.header_top_location .adv_cities li{ 
    float:left;padding:10px; 
} 

我如何解決這個問題？

city_nav代碼來自一個插件，我在多個頁面上使用，所以我不想更改代碼，因爲我在多個地方使用。

Answer 1

如果你想在你的下拉菜單中將鼠標懸停在一個列表上來顯示子菜單，那麼你不一定需要內部的div和東西...這是一個代碼片段，供您使用.. 。

.mega:hover > .adv_cities { 
 
    display: block !important; 
 
} 
 
.header_top_location .adv_cities { 
 
    background-color: #fff 
 
} 
 
.header_top_location .adv_cities ul { 
 
    overflow: hidden; 
 
} 
 
.header_top_location .adv_cities li { 
 
    float: left; 
 
    padding: 10px; 
 
}

<div class="header_top_location"> 
 
    <ul id="city_nav" class="city_nav menu"> 
 
    <li class="mega"><a href="#">Choose Location</a> 
 
     <div class="adv_cities" id="adv_cities" style="display:none"> 
 
     <ul> 
 
      <li>London</li> 
 
      <li>Bristol</li> 
 
      <li>Manchester</li> 
 
      <li>Kent</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 

 
</div>

只有我在CSS代碼的修改是在第1 3行......我刪除了不需要IMO額外的div ..

希望這有助於