跟随悬停菜单中的链接

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

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

查看我更新的 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/