my CSS Nav

HI all

I am in need of help.

I am re designing my site, and I want my nav bar to have a standard colour change on hover etc and colour change on current.

Anyway, the trouble I have is that I am using a reflection of my nav bar underneath and I want the hover and current to appear there to really look realistic.

You can see what I have atm, http://www.trwb.co.uk/newtest.html

you can see the reflection, but you dont see the hover on reflection.

Now I will be using an image for my nav bar which you can see here : http://trwb.co.uk/images/navimg.jpg

I want the reflection to show the hover too... but i dont want the reflection to be part of the link in the nav bar if you get what I mean

Can you help?

Thank you

Is it just me or have you already solved this?!

yup, used a different class for each nav link and a seperate image, the hover is the same image just moving position. I also used a <div> with no fill to sit over the reflection to stop the reflection being part of the link

what do you think

Looks good to me

One thing though - you could tidy up your CSS quite a bit. Since all your nav links share a lot of the same CSS, use;

Code: Select all

#nav ul li a {
float: left;
display: block;
height: 70px;
background-repeat: no-repeat;
background-position: 0 0
}

And then you can remove all those styles from the individual classes!

Plus another shorthand - change;

Code: Select all

 a.home:hover, a.services:hover, a.portfolio:hover, a.about:hover, a.contact:hover, a.animation:hover, a.testimonials:hover  {
background-position : 0 -71px;
}

to simply

Code: Select all

#nav ul li a:hover {
background-position : 0 -71px;
}

And then it'll be top notch