--- (nevermind, I'm just not good enough for it, I'll go for less appealing solution that I know) ---

Im confused...

nav ul li a.submenu should only affect anchor tags that have the class submenu. That's a pretty specific selector...

Can you put up a fiddle with your issue so we can see more clearly what you are struggling with?

Personally, with your current structure.. my CSS would be something a little less absolute unless needed...

a.submenu by itself is more than sufficient, unless you see that class being used elsewhere. If you are concerned about other page contamination, then maybe li > a.submenu, but really your "nav" element should have its own class at that point to alleviate that concern.

You are likely getting overruled by the generalization of your selector, and arent specific enough to change what you are looking for. Try this and see if it's what youre after.


Also, your markup has an error. Your closing sub ul is missing </ul> on line 8.

If you write a.submenu ul li you say that ul is a descendant of a.submenu, but that's not the case in that markup.
That ul is an adjacent sibling of a.submenu, so if you want to select that ul, you'll use the adjacent sibling combinator (+), so like this a.submenu + ul li. If you look at the pen I shared with you in your other post, then you see that I also used this combinator to select that ul that holds your submenu items.

Also using long selector chains like nav ul li a.submenu ul li a will lead eventually in CSS specificity problems, 3 is really the max you should use and add classes to the HTML if you need to.

Here's some reading for you: