ul menu column issue in IE7/8

[ryrocks]

Hi,

I have a drop down menu. The drop down section is in 4 columns, each column in a separate ul. It works fine in all modern browsers. But IE7 and 8 are causing problems.

See attachments. One attachment shows the successful output in ff, the other is the IE issue.

Any assistance would be greatly appreciated.

fiefox.jpg

explorer.jpg



Here is my CSS

#menu {
height:50px;
background:url(../image/menu.gif) no-repeat;
padding:0 20px;
margin-bottom:5px;	
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu > ul > li {
position: relative;
float: left;
z-index: 20;				
}

#menu > ul > li:hover {				
}

#menu > ul > li > a {
font-size: 12.5px;
color: #d9eeff;
font-weight:bold;
line-height: 14px;
text-decoration: none;
display: block;
padding: 12px 18px 11px 15px;
z-index: 6;
position: relative;
}

#menu > ul > li > a:hover{
color:#fff;
}

#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
top:37px;
z-index: 5;
padding: 10px;
border: 1px solid #1390e3;
-webkit-border-radius:25px;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
background: url('../image/menu.png');
}

#menu > ul > li:hover > div {
display: table;
}

#menu > ul > li > div > ul {
display: table-cell;
}

#menu > ul > li ul + ul {
padding-left: 20px;
}

#menu > ul > li ul > li > a {
text-decoration: none;
padding: 8px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}

#menu > ul > li ul > li > a:hover {
background: #1272b1;
-webkit-border-radius:25px;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
}

#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

Here is an example of the HTML

<div id="menu">

    <ul>
    
    <li><a href="#">Laboratory</a>
    
    <div>
    
    <ul>
        <li><a href="#">Autoclaves</a></li>
        <li><a href="#">Automated analysers</a></li>
        <li><a href="#">Balances</a></li>
    
    </ul>
    
    <ul>
    
        <li><a href="#">Electrophoresis</a></li>
        <li><a href="#">Freeze Dryer</a></li>
                                
...