Customizing or removing border from dropdown menu

Here’s CSS that will remove the side borders and allow you to set the top and bottom borders:

#nav-main ul.sf-dropdown-menu a {
    border-right: none;
    border-left: none;
    border-bottom: 2px solid blue;
    border-top: 2px solid blue;
}

Let me know if you need any further assistance with the CSS.

-Kevin

Thank you. I changed them all to none and I still have a white border. The blue did show up but the white outline was still there.

This is the CSS I’m using for the menu –

/* Change the hover color for the Menu on the Home page */
#nav-main ul.sf-menu a:hover {
color: #314c17
}

/* Home page Menu background color */
#nav-main ul.sf-menu a {
background: black;
}

/* Change the background and text color of main nav hover */
#nav-main ul.sf-menu a:hover {
background: #314c17;
color: white !important;
}

/* Keeps main nav parent item highlighted */
#nav-main ul li:hover > a {
color: white important!;
background: #314c17;
}

/* Keep font white on menu sub-items */
#nav-main ul.sf-dropdown-menu a {
color: #ffffff !important;
}

#nav-main ul.sf-dropdown-menu a {
border-right: none;
border-left: none;
border-bottom: none;
border-top: none;
}

Try this instead:

.sf-menu ul li {
    border: none;
}

-Kevin

That removes all the lines except the top of the dropdown and the right and left sides. I’m playing with a few more combos.

Hey @oedoma42,
Can you post a link to your site?

Hannah