ASP Dynamic Menu Sub Menu Disappears on mouse over of submenu. - html

Question

I am having an issue with the submenu disappering for a website that I was asked to update and fix an issue (employee who created is no longer here). Admittedly I am not a UI person but trying to figure this out.
The menu options display and the submenu show when the user mouses over the parent menu item, however as soon as the mouse is moved to the submenu it then disappears. I upped the DisappearAfter tag to 9999. while the menu now displays I am not able to click on the menu item to navigate.
<div id="navigation-container" >
<div id="navigation" >
<asp:Menu ID="menuNavigation" StaticDisplayLevels="1" StaticSubMenuIndent="0" Orientation="Horizontal"
Font-Names="Arial, Gill Sans" runat="server" DynamicEnableDefaultPopOutImage="True"
StaticEnableDefaultPopOutImage="False" DisappearAfter="9999" DynamicHoverStyle-CssClass="navmenuitemhover"
StaticSelectedStyle-BackColor="Red">
<DynamicMenuStyle CssClass="headerzindex10" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="navlevel1" />
<asp:MenuItemStyle CssClass="navlevel2" />
<asp:MenuItemStyle CssClass="navlevel3" />
</LevelMenuItemStyles>
</asp:Menu>
</div>
<asp:Label ID="lblOverview" runat="server" Text="Overview" CssClass="overviewLink" />
</div>
CSS Code:
#navigation-container
{
width: 100%;
color: #000;
top:60px;
position:fixed;
left:0px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF);
BACKGROUND-COLOR: #4b79bc;
z-index:10;
}
#navigation
{
margin:0px;
position:fixed; /* This fixes the menu items issue*/
padding-left:5px;
z-index:10;
}
.navlevel1
{
color: white;
z-index:10;
top:35px;
padding:5px;
}
.navlevel2
{
color: black;
font-family: Gill Sans MT !important;
font-size: small;
background-color: #a5bcdd;
z-index:10;
top:35px;
}
.navlevel3
{
color: black;
background-color: #dbe4f1;
font-family: Gill Sans MT !important;
font-size: small;
z-index:10;
}
.navmenuitemhover
{
background-color:#253c5e;
color:White;
font-weight:bold;
z-index:10;
}
.headerzindex10
{
position:relative;
z-index:10;
}
Any help would be appreciated.

Answer 1

After many many searches, CSS edits, and re-doing the menu as a JQ Menu, i found that the line filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF); was causing the issue. Our company uses IE8 as the standard and we are locked down from upgrades.
Researching after the issue was found indicated that using filters in the CSS causes lots of issues in functionality and placement of elements and it is best not to use them.
The 2 options to fix was to use a background image repeated across the <DIV> or to remove and just use a solid color. since the menu bar area so small enough we just used the endColorstr for the menu and it blended nicely with the gradient for the header.