CODEWITHSUNDEEP
csswordpresscss-selectors
js111
js111

Reputation: 1314

How to target sub menu active level?

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

You will see the "MERCEDES" tab in the current state which is correct but I need to have the submenu have a different current state as it looks terrible.. Have tried every selector and seem to be missing something.. THANKS!

Have tried .current-menu-item > a but cannot get the selector for the sub element.

enter image description here

Upvotes: 2

Views: 1000

Answers (2)

arttronics
arttronics

Reputation: 9955

Firefox's built in CSS Inspector Tools can help you find the selector(s) you need to customize the hover active state appearance.

Here is your CSS Active State Selector for hovering navigation links:

#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

Since it's cRaZy LoNg and ubber complex, I'll explain how I arrived at this selector Step-by-Step, with latest version of Firefox on PC:

1.) Right-click the MERCEDES KITS nav link and choose Inspect Element(Q) from the context menu. enter image description here

2.) You'll be on the span tag. Hovering will change the text color to red, as defined by the CSS styles. enter image description here

3.) Click the drop-down arrow on the span CSS selector and force it to always be in :hover state. enter image description here

4.) Press the Style Button located at the bottom right so it's active. When active, that button turns blue. enter image description here

5.) At top of the CSS Rules Panel, you'll see the selector(s) responsible for making the text red. enter image description here

6.) In this same section, you have access to the CSS Stylesheet and Line Number for these selectors: enter image description here

7.) Line Number 169 provides the hover active state appearance for all navigation anchors:

/* 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.) You can dynamically edit the CSS in Firefox CSS Rule Panel directly.
Example hover color change is to use: color: yellow !important; for Step 5 above:
enter image description here

9.) TIP: See the HTML Panel, 2nd icon from bottom left, to view other classname and id elements. enter image description here

Upvotes: 1

WordPress Mike
WordPress Mike

Reputation: 458

You could target the sub menu with ul.sub-menu and its child selectors.

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

Things like that.

Upvotes: 0

Related Questions