Remove border on Fullwidth Submenu and remove gaps between menu items.

Hi,

I’m looking for a solution to this small issue, if anyone can help.

As you can see from the image, I’ve got a Fullwdith Submenu with two of the menu items in different colours. Certain pages of the site are coloured to correspond with these two colours. I was hoping that the Fullwidth Submenu would end up looking like a ‘tab’ on these pages (but due to certain content and design aspects of the site I don’t want to use the Tab Section option).

However, there’s a kind of bottom border of a px or so that is constantly visible. I’m not sure it is technically a border, or whether the button on top of it is a px or two shorter than the container the menu is in and it’s the background colour of the container showing along the bottom. Either way, I’d like to remove it so that there’s no visible border and I’d also like to remove the gap between the two coloured menu items.

If anyone knows how I’d be grateful.

Under the stylings tab the submenu is currently set up to use the ‘footer’ colours I’ve set under Theme Options > General Styling, and I’ve inserted the following CSS to style the menu:

/* SUBMENU BAR COLOURS AND LINKS*/
.menu-item.menu-item-top-level.menu-item-top-level-10
{
    color: #ffffff;
    background: #2393de;
}
.menu-item.menu-item-top-level.menu-item-top-level-10 > a
{
    color: #ffffff;
    background: none;
}
.menu-item.menu-item-top-level.menu-item-top-level-11
{
    color: #ffffff;
    background: #90c652;
}
.menu-item.menu-item-top-level.menu-item-top-level-11 > a
{
    color: #ffffff;
    background: none;
}
#top .av-subnav-menu li a {
    border: 0px !important;
    margin-bottom: 0px!important;
}
#top .av-submenu-container {
    border-bottom: 0px!important;
    border-bottom-style: none!important;
}

Thanks in advance.