How to change background and/or border of the submenu box?



I’m making a website on my test site:
and now I’m stucked with searching a way to change the submenu box background colour (shown in the screenshot) to semitransparent and also to have an option to remove the box border using the custom CSS.

I have tried several solutions, none of them worked.

Any suggestions?


You have a style in your main stylesheet, .main-navigation ul ul that is giving your submenu that border. If you only want the sub-menu class items to have no border, create a new style (which should come after the rule above in the cascade — it looks like you’re using WordPress, so this should go in a child theme):

.main-navigation ul ul.sub-menu {
    border : 0px; 

If you want all instances of a ul inside a ul inside your main-navigation, you can leave off the .sub-menu part.

As for the background color, I’m not really clear on what you want to do — a background for the whole box, or change the grey background you get on the hover state? If you mean the grey background that’s being added by the style .main-navigation li li:hover, .main-navigation li li.focus. You can use the documentation on opacity to change the transparency of that background grey to something else, and add that new rule to your child theme, as well.

Answered By – Kerri

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.