CSS Dropdown Glitchy

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/