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


<!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">
<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);




<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>
        	<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>
    <li><a href="products.php?catId=25" title="Skincare"><span>Skincare</span></a>
<ul><li><a href="products.php?catId=33" title="Cleansers &amp; Toners">Cleansers &amp; Toners</a></li>

<li><a href="products.php?catId=34" title="Exfoliants &amp; Peels">Exfoliants &amp; 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 &amp; Tanning">Suncare &amp; 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>
<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>
<li><a href="products.php?catId=27" title="Bath &amp; Body"><span>Bath &amp; 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>
<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>
<li><a href="products.php?catId=29" title="Gifts"><span>Gifts</span></a>





#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;

Recommended Answers

All 4 Replies

Hey -

I don't have a solution, but I'm having the same problem. I've distilled it down to a bare-bones test case, and it seems to the be the height declaration on the <a> tags that is causing problems. For some reason, assigning a height to the <a> tags causes IE6 to behave as if you'd set the width to 100%.

I see you posted this a month ago - have you found a solution?

Try nesting a div in there and set its height.

Personally, I am totally sick of hover activations and dropdown menus. Why not just leave it on the screen.

Sorry to bump an old post but they were having the same issue I just was and I found a fix that I wanted to post.

Greenie2600's post lead me to figure out that it was a haslayout issue which lead me to this page where I found that if I add display: inline-block to the anchor element it fixed the issue.

greenie2600 ... Thanks man you saved me hours. Soluution remove the height attribute on A tag! In my case i was able to set the line-height of the anchor text instead to keep the slider the right height. Wicked as.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.