Remove top border in main sub-menu

[Priscilla]

How can you remove the top border that appears in the main menu’s SUB-menu when you hover over a submenu item? I’ve managed to remove the border from the main menu items (making it appear on the bottom instead), but don’t know how to target the sub-menu items.

[jade]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Priscilla]

Sure, it is: http://terracana.priscillathen.com. The menu option I’m referring to is the “Our Services” tab. Also, how can I target the colour of the font during hover?

[jade]

Hi there,

Please use this code:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none !important;
    color: #333;
}

Hope this helps.

[Priscilla]

Thanks for your quick reply. However, I’m trying to target highlighting in the SUB-menu, not the top-level menu. When you hover on a sub-menu item, the red line (border-top that appears by default) still is present.

[paul.r]

Hi,

Have you tried adding the code?

The code provided will get rid of the top border when hovering the sub menus.

I have tried it and it works.

Thanks

[Priscilla]

Yes, it works. My apologies (I had originally retyped the code but I guess there must’ve been a typo. After doing a copy & paste this time, the code provided works). Thank you both!

[thai]

You’re most welcome