Css menu - help!!

[panikyrobot]

Hey, I am new to web design and I've just scratched the basics on css. I've been playing around and trying to come up with a hover menu system that most sites seem to use. Similar to the one used on VEERLE.

I can get the menu to work in firefox correctly but fails in all other browsers.
The part the breaks is that for some reason the other browers just omits the background for a:link and shows the a:visited.

May someone please give me some advice? thank you!

#nav {
list-style-type:none;
}

#nav li {
float:left;
}

#nav a {
text-decoration:none;
text-indent:-9999px;
display:block;
height:32px;
}

/*home menu*/
#home a {
background-repeat:no-repeat;
width:68px;
}

#home a:link {
background-image:url(Pictures/home/home.png);
overflow:hidden;
margin-right:10px;
}

#home a:visited {
background-image:url(Pictures/home/home.png);
}

#home a:hover {
background-image:url(Pictures/home/homehover.png);
}

[Whane The Whip]

I have the same question. Here is a recent site I worked on: http://www.lawfirmsforsale.com/

In firefox and IE 7, the menu works and is positioned fine but in IE 6 the menu is no longer positioned correctly. I'm familiar with the use of _ and # in style sheets but in this case I'm unable to fix the menu to work in IE6. ref: http://www.lawfirmsforsale.com/templates/css/style.css

@panikyrobot Since I have your same question I can't help, however, after looking at your code I do have an unrelated option for you to consider. Instead of creating two images, one for the link and one for the hover state, you can use one image that includes both states then reference just a portion of the image. This prevents that flicker from happening when loading the hover image resulting in a cleaner menu transition. Check the style sheet I linked to above for an example of how to do this.