Offsetting background image on link hover (help needed)

[rmh636]

A small detail is hanging me up on a site redesign, and it’s probably solved pretty easily with a trick I must not be aware of. What I’m trying to accomplish, either through CSS triangles or with a background image on a:hover, is a red triangle pointing down over the link. Here’s what it’s supposed to look like:

http://img833.imageshack.us/img833/3508/arrowexample.png

The issue is, when I try to give a:hover a background image (the red triangle) and background-position it, the further up y I take it, the smaller the image gets until it disappears. What I’m looking for is a way to offset the background image from the link entirely so that it sits flush with that red line above. Perhaps the solution is to somehow make the “box” of the link bigger, though I wouldn’t know where to start with that either.

The existing code:

#nav li {
float: left;
margin-left: 45px;
}
#nav li a {
text-decoration: none;
color: #fff;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
#nav li a:hover {
color: #c08484;
background: url(images/triangle.png) no-repeat 0 -6px;
}

If there is a way to accomplish this using only CSS (triangles), I’m all ears.

Any help is greatly appreciated.

[zackw]

I would tackle this by stacking the different states of the nav on top of eachother in photoshop and then flipping from background-position:top to background-position:bottom on hover,

basically have your image the top half of it, the link without the red text and arrow, and then the bottom half, the text red and the arrow there, make sure they are the exact same size, so if 1 is 50 then they should both be 50 for a total of 100px in the image, set the height of the anchor link to 50 pixels so it only shows 1 of the states at a time and your done, if u need me to type out the code i can but im at work so hopefully this will do

[Author]

Posts