ul menu column issue in IE7/8

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.

Attachment 15307

Attachment 15305



Here is my CSS

Code:

---

#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

Code:

---

<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>
                               
...

---