Hello,
This is a very simple problem, but I cannot seem to get it to work properly in IE. I have a mega menu drop down that drops down via jquery on hover of an li. Now when your mouse leaves that li and hovers over the links that appear beneath it, I want the original li to stay in its hover state. This works perfectly in Chrome and FF, but in IE the original li leaves its hover state whenever you move the mouse down to the mega menu.
Here is a link so you can see what it looks like in both FF (correctly) and IE (incorrectly)
http://www.edirecthost.com/hhmobileh...are/?preview=1
and here is my CSS code for the li
Code:
ul#topnav {
position: absolute;
margin: 0;
padding: 0;
float: left;
width: 900px;
list-style: none;
font-size: 1.1em;
margin-top: 0px;
margin-left: 0px !important;
margin-left: 0px;
z-index: 999;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative;
z-index: 2;
}
ul#topnav li a {
float: left;
text-indent: -9999px;
height: 63px;
z-index: 2;
}
/*BEGIN OF HOVER*/
ul#topnav li.products:hover a, ul#topnav li.products a.products:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px -63px;
width: 238px;
}
ul#topnav a.inner {
background: none !important;
}
/*END OF HOVER*/
ul#topnav a.home {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) 0px 0;
width: 144px;
padding: 0px;
}
ul#topnav a.home:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) 0 -63px;
width: 144px;
}
ul#topnav a.products {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px 0px;
width: 238px; height: 62px;
/*Acutally Shows With JScript*/
}
ul#topnav a.products:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -144px -63px;
width: 238px;height: 62px;
/*Acutally Shows With JScript*/
}
ul#topnav a.about {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -383px 0px;
width: 191px;
}
ul#topnav a.about:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -383px -63px;
width: 191px;
}
ul#topnav a.contact {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -574px 0px;
width: 214px;
}
ul#topnav a.contact:hover {
background: url(http://p.b5z.net/i/u/10145668/h/Hammer_Sprite.gif) -574px -63px;
width: 214px;
}
ul#topnav li .row {clear: both; float: left; width: 500px; margin-bottom: 10px;
position:relative; width: 500px;}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%;
color: #fff;
}
ul#topnav .sub ul li h2 {
padding: 0; margin: 0;
font-size: 1.3em;
font-weight: bold;
}
ul#topnav .sub ul li h2 a {
padding: 5px 0;
background-image: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
outline: 0;
}
ul#topnav .sub ul li h2 a:hover {
padding: 5px 0;
background-image: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-decoration:underline;
outline: 0;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; /*--Reset text indent--*/
height: auto;
background: url();
padding-top:5px;
padding-bottom: 5px;
outline: 0;
display: block;
text-decoration: none;
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin-left: 2px;
font-size: medium;
}
ul#topnav .sub ul li a:hover {
color: #000;
outline: 0;
text-decoration: underline;}
any help would be greatly appreciated!!1
Before you post, read our: 
