CSS 3 navigation problem

[kahanu]

I’m having a problem executing a CSS script so it displays the navigation the way my client wants. The hover/selector image is chopped off.

Here’s a link to a screenshot of what the menu should look like: http://www.kingwilder.com/downloads/navigation.png

Here’s a link to the nav selector image: http://www.kingwilder.com/downloads/nav-selector-image.png

Here’s my attempt: http://www.kingwilder.com/downloads/my-attempt.png

And here’s the HTML navigation snippet:

Home


Images and Videos


Accessories


FAQ


Contact Us

This is as far as I got with the CSS:

ul#SiteNav

{

list-style-type: none;

}



ul#SiteNav li

{

margin-bottom: 20px;

cursor: pointer;

}



ul#SiteNav li a

{

color: #41509E;

font-weight: bold;

text-decoration: none;

}





ul#SiteNav li a:hover

{

background-image: url(../Content/images/nav-selector-image.png);

background-repeat: no-repeat;

width: 85px;

height: 34px;

}



ul#SiteNav li a.selected

{

background-image: url(../Content/images/nav-selector-image.png);





}

Any help is appreciated.

Thanks.

[Senff]

Since you give the A a fixed width of 85 x 34, that’s where you limit your area where the background image shows. So, you’ll have to make that area larger.

Then, you want a background image to appear not only at the hovered link in question, but also a little behind the link below it. So you’ll need to make the link height a little higher, but also give some negative bottom padding.

Here’s what you could do: http://jsfiddle.net/senff/xEWGW/

(grey area is just to show where the image would appear)

[kahanu]

Senff, Brilliant! It worked! Thanks a bunch!

[Author]

Posts