CSS drop menu hover state IE vs. FF

Hello Everyone,

I could use some help with a CSS dropmenu that I've been working on.

Its a horizontal UL that I have modified with CSS and javascript. I've run into a snag that I've been working on for hours now and I'm just not seeing the solution.

I've used a background image swap for the outer LI list. In the hover state directly over the link the image swaps to the over-state, but when the drop menu links open below and you move the mouse down the over-state for the outer LI goes back to its off-state. I've gotten the code to work in Firefox without a problem, but ofcourse IE has to be the fly in the ointment.

I am using the javascript solution from Suckerfish/ALA.

The question is: How do I keep the over-state for the outer LI links on when I'm mousing over the dropped menu in IE?

Here's the CSS code that works in FF but doesn't in IE:

/*DROPDOWN MENU CODE*/
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*MASTER LIST - NO BULLETS NO PADDING*/
ul#nav {
padding: 0;
margin: 0;
list-style: none;
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*OUTER LIST*/
ul#nav li {
display: block;
float: right;
width: auto;
height: 18px;
position: relative;
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 0px;
background-color: transparent;
}

ul#nav a {
display: block;
color: maroon;
font-family: Verdana, Tahoma, Ariel, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 9px;
text-decoration: none;
background-color: transparent;
padding: 0px;
margin: 0px;
}

/*OUTER LIST - ROLLOVER ANCHOR SWAPS*/
ul#nav li.company a {
background: url(images/bttn-co.gif) 0px 8px no-repeat;
width: 131px;
height: 24px;
border-bottom: 1px black solid;
}
ul#nav li.company a:hover {
background: url(images/bttn-co.gif) -131px 8px no-repeat;
}
ul#nav li.company:hover > a {
background: url(images/bttn-co.gif) -131px 8px no-repeat;
}

ul#nav li.services a {
background: url(images/bttn-serv.gif) 0px 8px no-repeat;
width: 130px;
height: 24px;
border-bottom: 1px black solid;
}
ul#nav li.services a:hover {
background: url(images/bttn-serv.gif) -130px 8px no-repeat;
}
ul#nav li.services:hover > a {
background: url(images/bttn-serv.gif) -130px 8px no-repeat;
}

ul#nav li.industries a {
background: url(images/bttn-ind.gif) 0px 8px no-repeat;
width: 143px;
height: 24px;
border-bottom: 1px black solid;
}
ul#nav li.industries a:hover {
background: url(images/bttn-ind.gif) -143px 8px no-repeat;
}
ul#nav li.industries:hover > a {
background: url(images/bttn-ind.gif) -143px 8px no-repeat;
}

ul#nav li.gallery a {
background: url(images/bttn-gal.gif) 0px 8px no-repeat;
width: 120px;
height: 24px;
border-bottom: 1px black solid;
}
ul#nav li.gallery a:hover {
background: url(images/bttn-gal.gif) -120px 8px no-repeat;
}
ul#nav li.gallery:hover > a {
background: url(images/bttn-gal.gif) -120px 8px no-repeat;
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*INNER LIST*/
ul#nav li ul {
display: none;
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
list-style: none;
text-align: right;
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*This code makes the top/left properties on all browsers except IE*/
ul#nav li > ul {
top: auto;
left: auto;
}

/*This code stops the li's from floating*/
ul#nav li ul li {
float: none;
position: relative;
margin: 0px;
padding: 0px;
}

/*This code controls the hover of the drop menu*/
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
background-image: none;
padding: 0px;
top: 25px;
left: 0px;
margin: 0px;
width: 0%; /*DO NOT CHANGE - This value keeps the dropmenu the same size as the OUTER rollover link box*/
}

/*\\\\\\\\\\\\\\\\\\\*/

/*This code controls how the drop menues will look when being hovered over*/
ul#nav li ul li.inner a {
display: block;
text-decoration: none;
color: maroon;
padding: 2px 3px 0px 0px;
background-color: #cccccc;
background-image: none;
height: 15px;
margin: 0px;
border-bottom: 1px gray solid;
}

ul#nav li ul li.inner a:hover {
color: maroon;
background-color: white;
background-image: none;
padding: 2px 3px 0px 0px;
height: 15px;
margin: 0px;
border-bottom: 1px gray solid;
}

Any suggestions or directions to a website with solutions would be great.

Thanx

 

csshover.htc - www.xs4all.nl/~peterned/csshover.html

 

Thanks for the link. I ran across this article before and lost it. I'm off to delve into getting this sucker working.