Question

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

你会看到当前状态下的“MERCEDES”标签是正确的，但是我需要让子菜单具有不同的当前状态，因为它看起来很糟糕。已经尝试了每个选择器并且似乎缺少某些东西..谢谢！

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

enter image description here

Answer 1

Firefox内置的 CSS Inspector工具可以帮助您找到自定义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

由于它是cRaZy LoNg和ubber complex，我将解释我是如何在PC上使用最新版本的Firefox来选择循序渐进：

1。）右键单击MERCEDES KITS导航链接，然后从上下文菜单中选择检查元素（Q）。 enter image description here

2。）您将使用span标记。根据CSS样式的定义，悬停会将文字颜色更改为 red 。 enter image description here

3。）点击span CSS选择器上的下拉箭头，强制它始终处于:hover状态。 enter image description here

4。）按下右下方的样式按钮，使其处于活动状态。激活时，该按钮变为蓝色。 enter image description here

5。）在 CSS规则面板的顶部，您会看到负责制作文字red的选择器。 enter image description here

6。）在同一部分中，您可以访问这些选择器的 CSS样式表和行号： enter image description here

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; ，用于上面的第5步：
enter image description here

9。）提示：请参阅左下角的 HTML面板，第二个图标，<查看其他 classname和{ {1}}元素。 enter image description here

Answer 2

您可以使用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

这样的事情。

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

2 个答案: