IE7 sub menu disappears on rollover

programming web dev
1

Page is http://bluetorchmedia.com/client_files/hartland/test/

If you rollover “about us” > “team” you can easily roll over each item under team.

If you rollover “investment approach” > “process” it gets buggy rolling over the sub items of process. Like the menu hides again even if the mouse is still inside the nav just to the right.

If you rollover “institutional” you can’t even get to the “healthcare” nav item.

This is happening only in IE7.

Here’s the css:

/*Set main navigation bar attributes */
#nav{
width:900px;
height:25px;
background-image:url(../images/nav-underline.jpg);
background-repeat:no-repeat;
background-position:bottom;
margin:0 0 5px 20px;
clear:both;
z-index:69;
}

/*set top level nav to display horizontally, position relative so 3rd level nav lines up*/
#nav li{
list-style-type:none;
float:left;
position:relative;
}

/*set attributes for top level nav (child elements inherit these, must reset if need be)*/
#nav li a{
margin-right:34px;
height:25px;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#00614a;
text-decoration:none;
}

/*set over effect for all nav elements*/
#nav a:hover{
color:#990000;
}

#nav ul{
border:1px solid #00614a;
padding:0;
margin:0;
}

/*set (reset) attributes for 2nd level nav (float none makes it vertical again)*/
#nav ul li{
float:none;
background-image:url(../images/nav_bg.png);
margin:0;
padding:0;
}

/*set (reset) attributes for each button in 2nd level nav*/
#nav ul a{
display:block;
padding:10px 10px 5px 3px;
margin:0;
font-size:11px;
width:135px;
height:25px;
}

#nav ul ul li a{
display:block;
padding:10px 10px 5px 3px;
margin:0;
font-size:11px;
width:135px;
height:25px;
}

#nav ul a:hover{
background-color:#00614a;
color:#FFF;
}

/*hide 2nd level nav as well as hide 3rd level nav when 2nd level is being rolled over*/
#nav ul,
#nav li:hover ul ul{
position: absolute;
visibility:hidden;
}

/*show 2nd level nav on rollover of top level nav*/
#nav li:hover ul{
visibility:visible;
}

/*set position of 3rd level nav*/
#nav ul ul{
position:absolute;
top:-1px;/*even up with addition of border*/
left:100%;
width:100%;
}

/*show 3rd level nav on rollover of 2nd level nav*/
#nav ul li:hover ul{
visibility:visible;
}