Hi all,
    I am having a problem styling the menu. On the sub menu, there appears to be a gap in between my menu items. I cannot seem to make it go away. The site is located here: http://209.200.75.25/dnn/

The css I am using is as such:

/* Main Menu */
.MainMenu_MenuContainer {
    background-color: Transparent;
}
.MainMenu_MenuBar {
    cursor: hand;
    height:23;
    background-color: Transparent;
}
.MainMenu_MenuItem {
    cursor: hand;
    color: #707070;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: Transparent;
    height: 23px;
}
.MainMenu_MenuIcon {
    cursor: pointer;
    cursor: hand;
    background-color: #CCCCCC;
    text-align: center;
    width: 15px;
    height: 23px;
}
.MainMenu_SubMenu {
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #CCCCCC;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
    border-bottom: #898989 1px solid;
    border-left: #898989 1px solid;
    border-top: #898989 0px solid;
    border-right: #898989 1px solid;
    color: #707070;
}
.MainMenu_MenuBreak {
 display: none;
}
.MainMenu_MenuItemSel {
    cursor: pointer;
    cursor: hand;
    color: White;
    font-family: Verdana;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: #707070;
}
.MainMenu_MenuArrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}
.MainMenu_RootMenuArrow {
    font-family: webdings;
    font-size: 10pt;
    cursor: pointer;
    cursor: hand;
}

Can someone please help with this? I have not run across this before and it is driving me nuts.

Thanks in advance