下拉菜单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 ..

希望这有助于