Question

I have a navigation system. CSS based. On a few of the li items I need to be able to customize the way it looks (background colour, font colour etc).

At the moment the top level menu is here: http://www.gardensandhomesdirect.co.uk/menutest

SALE, the bottom menu, is one I am trying to set as having a red background and have tried doing it this way:

.side_nav .li-sale { background-color:#900 !important; color:#FFF !important; }

However it is getting overuled.

What is the best way to set this up? So I can have custom li classes used.

Answer 1

That’s because your red background color is for LI which is under green A, so you cannot see that LI.

Just try setting style for child A element:

.side_nav ul li.li-sale a { 
    background-color:#900;
    color:#FFF; 
}