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.
[ATTACH]15307[/ATTACH]
[ATTACH]15305[/ATTACH]
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>
...
The attachments of this post were removed during the platform migration in 2018
