css - CSS 下拉菜单故障

Question

当您滚动顶部按钮时，下拉菜单有效，但当您尝试向下移动到下拉菜单时，它会消失。

http://vistaazulresort.com/

Answer 1

问题是您使用悬停来显示下拉菜单。如果用户没有将鼠标悬停在正确的菜单项上，则下拉菜单不会显示/消失。更不用说它不适用于大多数移动设备。

解决方案是使用 jQuery，特别是因为您已经加载了 jQuery(1.8.3)。

我不会为你写整个菜单，因为你需要学习。但是，我会给你足够的让你开始。以下是重要的方面...

.dropdown li ul {
    display:none;
}
.show-dropdown li ul {
    display:block;
}

<script type="text/javascript">
 $(document).ready(function(){
      $("#menu-top").click(function () {
      $(this).toggleClass("dropdown show-dropdown");
    });
  });
</script>

使用下拉菜单从菜单项中删除链接标签。

这是一个工作小提琴：http: //jsfiddle.net/GRkBM/