查看时突出显示子菜单项答案

【问题标题】：Highlight sub menu item when being viewed查看时突出显示子菜单项
【发布时间】：2011-06-24 19:24:35
【问题描述】：

我有一个菜单，基本上就是一堆无序列表。这是一个例子：

<div id="horiz-menu" class="moomenu"><div class="wrapper">
  <ul class="menutop">
    <li><a href="something.html"><span>Home Page (top menu item)</span></a>
      <ul>
        <li><a href="something2.html"><span>Second page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
    <li class="parent active"><a href="something3.html"><span>Resources (top menu item)</span></a>
      <ul>
        <li id="current" class="active"><a href="something4.html"><span>Third Page (sub menu item)</span></a>
        </li>
        <li><a href="something5.html"><span>Fourth Page (sub menu item)</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div></div>

当顶部菜单项悬停在上方时，其样式看起来顶部菜单项是水平导航菜单，而子菜单项是垂直下拉列表（无滚动）；隐藏其他明智的。这一切都有效。我的问题是，当访问者在该页面上（而不是简单地将鼠标悬停在该菜单项上）时，对 css 进行编码以便子菜单项突出显示（背景颜色应该改变）的正确方法是什么？

我试过这个：

#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}

我不知道这是否是这样做的方法。有人可以帮忙吗？如果您感到困惑，我希望能够使用 css 用 li class="active" 或 id="current" 为第二个 ul 着色。 “活动”和“当前”的 id 和类会动态应用于正在查看的页面的任何列表项。

谢谢！

【问题讨论】：

您要突出显示子菜单还是水平菜单？您当前的 css 正在更改主页和资源的背景。但您的问题似乎是您想突出显示当前的子菜单（例如第二页）。

标签： css list menu highlight

【解决方案1】：

试试 JQuery 中的 addClass 方法

$("a.classname").click(function(){

    $("li#idname").addClass("active");

});

【讨论】：

【解决方案2】：

使用带有背景颜色的.active 类应该可以，但是，这取决于您拥有的其他CSS。您必须确保 .active 或 #current 的特异性大于默认样式 (#horiz-menu ul li)。另外，请务必仔细检查是否是 li 具有默认背景 css 而不是其中的锚点。

【讨论】：