在下拉菜单中保持顶部菜单项突出显示答案

【问题标题】：Keeping top menu item highlighted while in dropdown在下拉菜单中保持顶部菜单项突出显示
【发布时间】：2012-04-19 11:57:51
【问题描述】：

只是将这个网站放在一起，并希望当您将鼠标悬停在下拉菜单项上时，带有下拉菜单的菜单项以白色突出显示。 http://dl.dropbox.com/u/7086475/Paul%20Day/index.html

【问题讨论】：

Ian，非常感谢您将工作代码留在 Dropbox 中。你今天救了我的培根！

标签： css list drop-down-menu

【解决方案1】：

您可以使用#nav li:hover 代替#nav a:hover 选择器。

与锚不同，当您在子菜单中时，li 将保持悬停状态。

它在 IE6 中不起作用，因为悬停伪类仅适用于锚点。

#nav li:hover{
 color: #fff;
}

【讨论】：

【解决方案2】：

使用这个jquery，它会解决你的问题

$(function() {
        $('#nav li ul').hover(function() {
           $(this).prev('#nav li a').css('color', '#FF6600');
        }, function() {
            $(this).prev('#nav li a').css('color', '#fff');
        });
    });

【讨论】：

谢谢你，但是一旦你离开那个菜单项，你如何阻止它保持突出显示？已更新页面。

【解决方案3】：

您可以使用jquery or javascript为父li的悬停状态设置css class。

编辑

你可以像这样设置一个css类...

$(document).ready(function() {
    $("#nav li li").mouseenter(function() {
      $(this).parent().parent().addClass("test");
    });

    $("#nav li li").mouseleave(function() {
      $(this).parent().parent().removeClass("test");
    });
});

和 Css 样式...

.test { font-weight:bold; color:#fff; }

【讨论】：

您能edit 并对此进行扩展吗？对于the second copy of this answer here?，这并不是真正的答案，可能会被删除。