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.