Hello all. new here as i'm in need of help!
I've made a sliding door dropdown menu that works perfect in FF Safari and co, but it won't work properly in internet explorer 6
the issue lays with the first level <li><a></a></li>
the <li> are floating left but in ie6 the block level <a> is bursting out of the float and stretching to 100%, the problem can be fixed by giving the <li> a width, but this defeats the object of the sliding door tabs and makes the tabs stretch onto two line which obviously isn't what i want.
I've also tried floating the <a> and <span> tags left, this makes the menu look right, but then the dropdown messes up in all browsers.
If anyone has any words of wisdom, that'd be great!!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li><a href="index.php" title="Home" style="color: #00C7B2;" ><span>Home</span></a></li>
<li><a href="brands.php" title="Shop by Brand"><span>Shop by Brand</span></a>
<ul>
<li><a href="brand-details.php?bId=185">Skinceuticals</a></li>
<li><a href="brand-details.php?bId=187">ila-spa</a></li>
<li><a href="brand-details.php?bId=188">Juice Beauty</a></li>
<li><a href="brand-details.php?bId=189">Spiezia</a></li>
<li><a href="brand-details.php?bId=190">Jane Iredale</a></li>
<li><a href="brand-details.php?bId=191">Medik8</a></li>
<li><a href="brand-details.php?bId=192">Skin.ny</a></li>
<li><a href="brand-details.php?bId=194">Fake Bake</a></li>
<li><a href="brand-details.php?bId=195">This Works</a></li>
</ul>
</li>
<li><a href="products.php?catId=25" title="Skincare"><span>Skincare</span></a>
<ul><li><a href="products.php?catId=33" title="Cleansers & Toners">Cleansers & Toners</a></li>
<li><a href="products.php?catId=34" title="Exfoliants & Peels">Exfoliants & Peels</a></li>
<li><a href="products.php?catId=35" title="Eyes and Lips">Eyes and Lips</a></li>
<li><a href="products.php?catId=37" title="Treatments">Treatments</a></li>
<li><a href="products.php?catId=38" title="Suncare & Tanning">Suncare & Tanning</a></li>
<li><a href="products.php?catId=108" title="Kits">Kits</a></li>
<li><a href="products.php?catId=109" title="Moisturise">Moisturise</a></li>
</ul>
</li>
<li><a href="products.php?catId=26" title="Colour"><span>Colour</span></a>
<ul><li><a href="products.php?catId=31" title="Face">Face</a></li>
<li><a href="products.php?catId=32" title="Bronzing / Highlighting">Bronzing / Highlighting</a></li>
<li><a href="products.php?catId=39" title="Cheeks">Cheeks</a></li>
<li><a href="products.php?catId=40" title="Eyes">Eyes</a></li>
<li><a href="products.php?catId=41" title="Lips">Lips</a></li>
<li><a href="products.php?catId=42" title="Beauty tools">Beauty tools</a></li>
</ul>
</li>
<li><a href="products.php?catId=27" title="Bath & Body"><span>Bath & Body</span></a>
<ul><li><a href="products.php?catId=60" title="Bathing">Bathing</a></li>
<li><a href="products.php?catId=61" title="Bodycare">Bodycare</a></li>
<li><a href="products.php?catId=62" title="Relax">Relax</a></li>
</ul>
</li>
<li><a href="products.php?catId=28" title="Mens"><span>Mens</span></a>
<ul><li><a href="products.php?catId=63" title="Skincare">Skincare</a></li>
<li><a href="products.php?catId=64" title="Shaving">Shaving</a></li>
<li><a href="products.php?catId=65" title="Bath and body">Bath and body</a></li>
</ul>
</li>
<li><a href="products.php?catId=29" title="Gifts"><span>Gifts</span></a>
</li>
</ul>
</body>
</html>CSS
#nav {
height: 30px;
background: url(img/nav-bg.png) repeat-x;
margin-bottom: 20px;
}
#nav li { /* all list items */
display: block;
zoom: 1;
float: left;
background-color: #fff;
}
#nav a {
display: block;
zoom: 1;
color: #AAA38E;
text-transform: uppercase;
background: url(img/nav-tab-right.png) no-repeat top right;
}
#nav span {
display: block;
zoom: 1;
height: 17px;
background: url(img/nav-tab-left.png) no-repeat top left;
padding: 13px 12px 0 12px;
}
#nav a:hover {
color: #00C7B2;
background-position: bottom right;
text-decoration: none;
}
#nav a:hover span {
display: block;
background-position: bottom left;
}
#nav li ul { /* second-level lists */
position: absolute;
z-index: 1;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 190px;
line-height: 18px;
background: url(img/nav-dropdown-bg-bottom.png) no-repeat left bottom;
padding: 0 0 8px 0;
margin: 0;
}
#nav li ul li {
float: none;
background: url(img/nav-dropdown-bg.png) repeat-y left;
padding: 0 1px 0 2px;
}
#nav li ul li a {
display: block;
height: auto;
background: none;
padding: 2px 8px 0 8px;
margin: 0 4px;
}
#nav li ul li a:hover {
color: #fff;
background-color: #00C7B2;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}