Sub-menu items inheriting formatting from top level menu item

[cubistular]

I need a top level menu item to have a border around it, but the sub-menu items to not have a border around them. At the moment they’re inheriting the border formatting.

I am using this code to get a border around the top level menu item:

#menu-item-857 span {
border: 2px solid #ffffff;
padding: 6px;
margin: -90px auto; 
}

… but this is placing a border around the sub-menu items.

Please can someone help.

The URL for the site I’m trying to achieve this on is: https://pierreosteopath.com/ … and it’s the “Book Now” menu item.

Any help would be greatly appreciated!

[mldarshana]

Hi There @cubistular

Thanks for writing in! Could you please try adding the following CSS rule also into your X -> Theme Options -> CSS area to resolve that issue.

#menu-item-857 .sub-menu span {
    border: none;
}

Hope that helps.

[cubistular]

That worked brilliantly - many thanks!

[Prasant]

You are most welcome.