Issue with sliding door CSS menu...

So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.

However, usually when I move to the next link using:

#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }

It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that 开发者_开发问答the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.

So any ideas?

If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.

Something like this for the markup:

...
<a href="/map">Map</a>
...

And something like this for the CSS:

#xmenu li.ypart a { display: block; width: 40px; height: 35px; }