CSS Sprite Menu - can't get hover to work

http://tinyurl.com/2uajtqq

I have this menu that I’m trying to code as a sprite menu and I’m having trouble getting the hover state to show. I can’t figure out what I’ve done wrong here. Can someone take a look?

Ray’s code pretty much shows you how to do it: view his HTML to see where the spans are.

In the CSS, the anchors are positioned relatively (only to make them positioned ancestors, so the spans know who to take orders from), and the spans are children of the anchors and absolutely positioned over the anchors (using their background image to cover the anchor text).

I don’t know of a tutorial but I do know of a historical document explaining the basic image replacement techniques… the one Ray has is called Gilder-Levin.
http://www.mezzoblue.com/tests/revised-image-replacement/

Thanks so much, Ray. I really appreciate your help.

I really prefer the sprite image to be applied to an AP’d span for text replacement. That way your menu is still functional with images off.

I’d like to learn how to do this. Do you know of a tutorial where I can find out more about that?

Hi,
The problem seems to be the sprite image set as a BG on the UL to preload the hover states. The hover states are transparent and allowing the normal state to show through. That makes it look as if nothing is changing.

I really prefer the sprite image to be applied to an AP’d span for text replacement. That way your menu is still functional with images off. In this case though with the transparent hover state it allows the text to show through. In the code below I had to use a 27px top padding on the anchor to push the live text out of sight, it kinda defeats the purpose but it is about all you can do with transparent images (other than display:none as you had it).

Another advantage to hooking the image to the span is that you can reduce your BG positions by just moving the entire span up on a:hover with a neg margin.

Working from This Example I got your menu working below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Tab Menu</title>
<style type="text/css">

#nav {
    width: 561px;
    height: 27px;
    padding: 0;
    margin: 20px auto;
    list-style: none;
}
#nav li {
    float: left;
    width: 111px;
    height: 27px;
    position:relative;
    overflow:hidden;/*hide the 54px tall span*/
}
#nav a {
    float: left;
    width: 111px;
    padding: 27px 0 0;/*hide live text*/
}
#nav a span {
    position:absolute;
    top:0;
    left:0;
    width:111px;
    height:54px;/*image height*/
    font-size:0;
}
#nav a:active span,
#nav a:focus span,
#nav a:hover span {
    margin-top:-27px; /*position the span on hover to reduce CSS BG positions*/
}

#home a span {
    background: url(images/navtabs.png) no-repeat 0 0;
}
#about-us a span {
    background: url(images/navtabs.png) no-repeat -111px 0;
}
#contact-us a span {
    background: url(images/navtabs.png) no-repeat -222px 0;
}
#client-care a span {
    background: url(images/navtabs.png) no-repeat -333px 0;
}
#our-blog a span {
    background: url(images/navtabs.png) no-repeat -444px 0;
}    
</style>

</head>
<body>

<ul id="nav">
    <li id="home"><a href="/">Home<span></span></a></li>
    <li id="about-us"><a href="about-us">About Us<span></span></a></li>
    <li id="contact-us"><a href="contact-us">Contact Us<span></span></a></li>
    <li id="client-care"><a href="client-care">Client Care<span></span></a></li>
    <li id="our-blog"><a href="our-blog">Our Blog<span></span></a></li>
</ul>

</body>
</html>