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中所做的唯一更改是在前3行......我删除了不需要IMO的额外div ..

希望这会有所帮助

下拉菜单css不工作，内部div不显示

1 个答案: