I have an issue with a pure-CSS drop down which works correctly in Firefox, Webkit etc, but has a z-index issue in IE8 (and possibly IE < 8).

Basically I have a on-hover drop down list based menu (I know about the accessibility issues, don't worry), which has a 2px margin between the menu items on the dropped-down UL. The dropped-down UL has background-color:transparent.

When the dropped down UL is over another DIV of content, when the cursor is over the margin area (the space between the LIs), in Firefox the menu continues to be displayed (as the parent LI:hover state is still valid), whereas in IE, the hover state is cancelled, and the UL is no longer displayed.

If however I choose to give the dropped-down UL a background-color of a solid colour (e.g. white), it behaves correctly.

One solution would be to have a transparent background image, but I'd prefer to do this with CSS transparency. Any ideas?

Code is as follows:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>UL test</title>
<style type="text/css">

/** general tags **/
body {
	background: #aaaaaa;
    font-family: arial;
    font-size: 11pt;
}

#container {
  float: left;
  width: 960px;
  background-color: white;
  clear: both;
  margin: 0 auto;
}

ul,
li {
  margin: 0; padding: 0; list-style: none;
}

/** test **/
#header {
  float: left;
}
ul#test {
  float: left;
  background: #aaaaaa;
  color: blue;
  border: 1px solid blue;
}

ul#test li {
  display: inline; float: left;
  line-height: 18px;
  padding: 10px;
  position: relative;
  background-color: #ebebeb;
  color: black;
}

ul#test li:hover {
  background-color: #333333;
  color: white;
}

ul#test li ul {
  display: none;
  position: absolute;
  top: 0; left: 0;
}

ul#test li:hover ul {
  display: block;
  background-color: transparent;
  margin-top: 36px;
  z-index: 100;
}

ul#test li ul li {
  display: block; float: none;
  width: auto; white-space: nowrap;
  margin: 2px;
  z-index: 100;
}

#mainbody {
  float: left;
  width: 800px; height: 400px;
  position: relative;
  background-color: #336633;
  z-index: 0;
}

#inner {
  position: absolute;
  width: 400px; height: 300px;
  top: 50px; left: 150px;
  background-color: white;
  z-index: 0;
}

.main_item {
  z-index: 0;
  width: 495px; height: 249px;
  padding: 5px 0 0 0;
  float: left;
  text-align: center;
}

</style>
</head>

<body>
 <div id="container">
   <div id="header">
    <ul id="test">
            <li>Test 1</li>
            <li>Test 2 <ul>
                <li>Test 2a</li>
                <li>Test 2b</li>
                <li>Test 2c</li>
              </ul>
            </li>
            <li>Test 3</li>
            <li>Test 4 <ul>
                <li>Test 4a</li>
                <li>Test 4b</li>
                <li>Test 4c</li>
                <li>Test 4d</li>
              </ul>
            </li>
            <li >Test 5</li>
          </ul>
   </div>
   <div id="mainbody">
     <div id="inner">
       <div class="main_item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id turpis tortor. Quisque consequat elit at orci consectetur rutrum. Donec ipsum nisi, adipiscing non vestibulum nec, aliquet ut nisi. Cras ac enim ac magna vulputate sodales. Aliquam diam eros, rutrum quis posuere in, tempor nec quam. Phasellus id leo sapien, id consectetur ligula. Vestibulum vel nulla enim. Duis ut euismod purus. </div>
     </div>
   </div>
 </div>
</body>
</html>