如何定位子菜单活动级别？

Question

http://misha.pixelworklab.com/mercedes-sl/

您将看到当前状态下的“MERCEDES”选项卡是正确的，但我需要让子菜单具有不同的当前状态，因为它看起来很糟糕。尝试了每个选择器，但似乎缺少一些东西。谢谢！

已尝试.current-menu-item > a，但无法获取子元素的选择器。

Answer 1

您可以使用ul.sub-menu 及其子选择器定位子菜单。

ul.sub-menu ul.sub-menu li ul.sub-menu li:first-child a ul.sub-menu li a ul.sub-menu li:last-child a

类似的事情。

Answer 2

Firefox 内置的 CSS 检查器工具 可以帮助您找到自定义 hover 活动状态外观所需的选择器。

这是用于悬停导航链接的 CSS 活动状态选择器：

#megaMenu ul.megaMenu>li:hover>a span.wpmega-link-title,#megaMenu ul.megaMenu>li:hover>span.um-anchoremulator span.wpmega-link-title,#megaMenu ul.megaMenu>li>a:hover span.wpmega-link-title,#megaMenu ul.megaMenu>li>span.um-anchoremulator:hover span.wpmega-link-title,#megaMenu ul.megaMenu>li.megaHover>a span.wpmega-link-title,#megaMenu ul.megaMenu>li.megaHover>span.um-anchoremulator span.wpmega-link-title

由于它是疯狂的 LoNg 和 ubber 复杂，我将解释我是如何在 PC 上使用最新版本的 Firefox 一步一步得到这个选择器的：

1.) 右击MERCEDES KITS 导航链接并从上下文菜单中选择Inspect Element(Q)。

2.)您将位于span 标签上。悬停会将文本颜色更改为 red，由 CSS 样式定义。

3.) 点击span CSS 选择器上的下拉箭头并强制它始终处于:hover 状态。

4.)按下位于右下角的样式按钮，使其处于活动状态。激活时，该按钮变为蓝色。

5.) 在 CSS 规则面板 的顶部，您会看到负责制作文本 red 的选择器。

6.) 在同一部分中，您可以访问这些选择器的 CSS 样式表 和 行号：

7.) 第 169 行为所有导航锚点提供 hover 活动状态外观：

/* Top Level Items Title - Hover */
#megaMenu ul.megaMenu > li:hover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li:hover > span.um-anchoremulator span.wpmega-link-title,
#megaMenu ul.megaMenu > li > a:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li > span.um-anchoremulator:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > span.um-anchoremulator span.wpmega-link-title {
  text-shadow: 0 -1px 1px #ffffff;
  color: red !important;
}

8.)您可以在 Firefox CSS 规则面板中直接动态编辑 CSS。
示例hover 颜色变化是使用：color: yellow !important; 用于上面的Step 5：

9.) 提示：查看 HTML 面板，左下角第二个图标，查看其他 classname 和 id元素。