Why isn't my drop down menu working in IE?

I've created a drop down menu which works fine in Opera, FF, Chrome and Safari.

But of cours it's not working in IE 8.

You can see the menu here: http://sanabygg.stiengenterprises.com - menu item Systemgulv.

Can any one tell me why this is not working here?

You can see a sandbox of the solution ehre: http://jsfiddle.net/bCJKd/2/

From what I can see, it's not a z-index issue.

This is the CSS I'm using:

#mainmenu
{
  display: block;
  line-height: 30px;
  height: 30px;
  font-size: 1.3em;
  text-transform: uppercase;
  font-family: Cuprum, Georgia, Times, Arial, serif;  
  float: right;
  padding-top: 43px;
  position: relative;
  z-index:auto;
}

/* Sub navigation */
#menu-main-men开发者_运维知识库u ul.sub-menu {
  position: absolute;
  z-index:999;
  min-width: 130px;
  visibility:hidden;
  padding-bottom: 5px;
  color: #fff;
  font-size: 0.80em;
  padding: 5px; 
  background-color: rgba(0, 0, 0, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);

}

#menu-main-menu li:hover ul, #menu-main-menu li li:hover ul, 
#menu-main-menu li li li:hover ul, #menu-main-menu li.sfhover ul, 
#menu-main-menu li li.sfhover ul, #menu-main-menu li li li.sfhover ul {
    visibility: visible;
}

Set the z-index property of the parent div, to auto. If you do not set the position and z-index property in IE, for all parent divs, the z-index of the child div is ignored. Hope you get my point.

If you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other.

What @Cthulhu said and it will be worthwhile checking the dimensions of the item you want to hover over because it will be different in IE than in the other browsers.