CODEWITHSUNDEEP
htmlcsswordpresscss-selectorswordpress-theming
hyperknot
hyperknot

Reputation: 13976

Why doesn't this CSS selector work (selecting sub-menu in Wordpress)

I am trying to select the sub-menu item from a Wordpress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don't know what is happening in this case.

The following ones are working:

.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }

While this one doesn't work:

.widget_nav_menu ul .menu-item li .sub-menu { background: red; }

Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?

Luckily at this level of customization I don't need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?

Here is a live site, but it’s the same on all Wordpress installs with TwentyTen theme and a multi-level menu on the left.

UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files

BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:

.widget_nav_menu li.menu-item ul.sub-menu

Upvotes: 1

Views: 1337

Answers (3)

billy
billy

Reputation: 1160

Try this : 

.widget_nav_menu ul .menu-item .sub-menu li { background: red; }

Because the li item is below the .sub-menu ul...

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185913

I believe you want this:

.widget_nav_menu ul .menu-item li.sub-menu { background: red; }

Upvotes: 1

cweinberger
cweinberger

Reputation: 3588

try:

.widget_nav_menu ul .menu-item .sub-menu li { background: red; }

because sub-menu class belongs to ul and there is no sub-menu class after li

Upvotes: 2

Related Questions