CSS classes in menu items

[skullo27]

Hi, could you tell me where I am going wrong… I am trying to use custom CSS class to colour particular menu items in my sub-menu. In this case, it is sale items, so I add the CSS class to the menu item “sale-sub-menu” and then add some custom CSS in the theme settings custom css area, but I cannot get it to show the change in colour. I think maybe that I need more in the class declaration? I have attached screen shots to show exactly what I have done.

Thanks
Sam

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

You need to observe the deeper selectors for the a link.

li.menu-item.sf-mega-menu ul.sub-menu li.sale-sub-menu.menu-item>a {
    color: red;
}
li.menu-item.sf-mega-menu ul.sub-menu li.sale-sub-menu.menu-item>a:hover {
    color: yellow;
}

Thanks.

[skullo27]

thanks that worked a treat! the debug info did say though that I did not need the li, ul elements though.

thanks again.

[David Martin – Support]

Great, no problem!

– David.