IE :hover

[thealexbaron]

I'm trying to make a menu similar to the one on zdnet.com, but I can't get the hover effect to work in IE 6.

I have tried several solutions to figure out why the hover effect doesn't work in IE 6 including jquery scripts, IE behavior scripts, etc.

The hover effect works in all of my target browsers except IE6. I've tried to use up my resources, and I am at a dead-point. Any help is greatly appreciated!

<ul id="navigation">
    <li id="Home"><a>Home</a></li>
    <li id="Top"><a>Top 100</a></li>
    <li id="All"><a>All Love Quotes</a></li>
    <li id="Sad"><a>Sad Love</a></li>
    <li id="Break"><a>Break Up</a></li>
    <li id="Sweet"><a>Sweet Love</a></li>
    <li id="Cute"><a>Cute Boyfriend</a></li>
</ul>

The CSS

#navigation {
	width: 773px;
	list-style:none;
	clear:both;
	}

#navigation li, #navigation li a {
	float:left;
	background-position: 0 0;
	background-repeat:no-repeat;
}
#navigation li {
	height:50px;
	padding:0;
	margin:0;
}
#navigation li a {
	display:block;
	height:38px;
	overflow: hidden;
	outline:none;
	text-align:center;
	padding-top:17px;
	color:#FFF;
	font-size:17px;
	font-weight:bold;
	
}
#navigation li a:hover { background-position:0 -61px; }


	#Home, #Home a {
	background: url(/images2/navigation/Home.jpg);
	width:79px;
}
#Top, #Top a {
	background: url(/images2/navigation/Top.jpg);
	width:92px;
}
#All, #All a {
	background: url(/images2/navigation/All.jpg);
	width:150px;
}
#Sad, #Sad a {
	background: url(/images2/navigation/Sad.jpg);
	width:101px
}
#Break, #Break a {
	background: url(/images2/navigation/Break.jpg);
	width:94px
}
#Sweet, #Sweet a {
	background: url(/images2/navigation/Sweet.jpg);
	width:113px
}
#Cute, #Cute a {
	background: url(/images2/navigation/Cute.jpg);
	width:144px
}

[thealexbaron]

Oh, thanks dudes.

I figured it out: http://www.xs4all.nl/~peterned/csshover.html

[Eric]

Ie6 was not working because you don't have a href on the anchors. That is, if your doing a:hover. If your doing li:hover then whatever hover is your best bet.