Hi,
In CSS if you want to manipulate a particular child element (eg. an Unordered List within another Unordered List), you just duplicate it:



This means only select a UL inside another UL, then select the LI and finally the A tag instead.

If you want to do a 3rd level, just use 3x "ul". The same can be done with "li" and any other HTML element.

Hope this helps.

JB

I know CSS pretty well, and I can follow what you're saying, but the problem arises when the menu has more than one layer of drop downs. My cas has the following rule:
.custom ul.mega-menu ul li a:hover {
border: none;
background: #0E1A6F;}

.custom ul.mega-menu ul ul li a:hover {
border: none;
background: #0E1A6F;}

This works fine with one level of drop downs. If the link has 2 levels only the second level shows the background change on the hover state, not the first level.

Is there something in the code that has some javascript that could be effecting my css?

There shouldn't be anything that can affect your code like that in the Javascript. The JS adds a "hover" class to the active menu (not to be confused with the ":hover" CSS selector). Looking at your example URL now, it only has 1 level of menus so it's hard to see what you're referring to.

In your CSS, just remove one of the double "ul" so its:


Hope this helps.

If you're interested in general C5/HTML/CSS/JS training and support, we do offer a paid service for that. More details at:http://c5extras.com/training/

JB