jquery - 跟随悬停菜单中的链接

Question

我有一个水平菜单，第一个菜单项上有一个下拉 div。

http://jsfiddle.net/2dPXY/

我希望第一个链接“Find a Doctor”仍然可以点击，所以有人可以从下拉列表中选择，或者直接点击链接。

现在它不可点击，我不知道为什么。我尝试将以下内容添加到我的 jquery 文件中，但没有奏效：

（这也在上面的jfiddle中）

      $("#menu li a").click(
        function () {
          console.log($(this).html());
          window.location.href = $(this).attr('href');
        }
      );

知道为什么我无法单击具有下拉列表的链接以及如何修复它吗？

Answer 1

问题是您的.submenudiv 位于选项卡的顶部，因此它拦截了点击。（我发现它通过设置一个 10 像素的红色边框定位在选项卡上）。解决此问题所需要做的就是使用top30px 的 a 而不是margin-topin #catmenu。

查看我更新的 jsfiddle：http: //jsfiddle.net/q9A9T/

Answer 2

是在.submenu链接。

提示： 1）ID 必须是唯一的，以免引起冲突。

2）这是不必要的：

  $("#menu li").hover(
    function () {
      $("a#menulink", this).css('color','#39c')
      .next('.submenu').css('display','block');
    }
  );

仅使用 CSS：

#menuli:hover #menulink{
    color: #39c;
}

#menuli:hover .submenu{
    display: block;
}

Answer 3

您可以在css中添加到ul#menu a#menulink-ID z-index:1;，它会起作用！见这里：http: //jsfiddle.net/2dPXY/4/