Marking menu items that contain sub menus

It’s weird to to post a thread as an answer and not a questions. I was was fiddling around with CSS3 selectors and had a flashbulb moment for using :nth-child ( and derivatives) to mark menu items that contain sub menus. Basically this would be an alternative to doing something like this: CSS-Test-Your-CSS-Skills-39-dropdown-arrows/page2&

I haven’t seen anyone else using this technique this yet, so I thought I would share it with the rest of the forum. The CSS is VERY minimal and simple, which is why I like it:

 .nav li a { display:block; background:orange;  }
 .nav li a:only-child { background: #555; color:#fff } 

The one drawback is that this method is not IE8 or lower friendly. :confused:

I have done a complete write up and a [URL=“http://raym31.home.comcast.net/~raym31/post1-demo1.html”]quick a demo, for those who may be curious.

Nice work, Ray … although in this age of small, touch screen devices, these CSS drop downs are becoming obsolete IMHO, as they don’t work too well on such devices.

Nice use of :only-child Ray :slight_smile:

Had a play around and you can style the item directly rather than by exclusion.


.nav li a { display:block; background:#555;color:#fff  }
.nav li a:not(:only-child) { background: orange; color:#000}	

You can also use last-child to the same effect:


.nav li a:last-child{background:green}

Still no IE8 support though.

There are a lot of click dropdowns on mobile though as that seems to be the common method for converting wide menus into a single dropdown so Ray’s method should still be useful there.

Thanks Paul!

Had a play around and you can style the item directly rather than by exclusion.

This is true, in practice I am using

  .nav li a:first-child:nth-last-child(2):before { ...}

which actually targets anchors that are followed by (supposedly) drop downs.

I was avoiding the :NOT idea purposely, but as they say in merry olde England … in for a penny…

You can also use last-child to the same effect:

True… the flood gates have been opened!!!