Question

I’m trying to code my navigation on my portfolio and am looking for a simpler way of doing this than using background position and css sprites.

Basically I want navigation similar to that of this website: http://www.ernesthemingwaycollection.com/ where when you hover over the navigation, a bar appears below it.

Is there a simpler way of doing this or do I have to use background positioning.

Btw, I have used text as my navigation and would rather keep it that way instead of using images for the navigation. I only want to use images for the hover image. I have tried to do this simply by using the following code:

#nav a:hover {
background: url('Images/Nav_Hover.png') no-repeat;
}

However, I can’t seem to position the image? Any help?

Thanks in advance!

Answer 1

#nav a:hover { 
  background: url('Images/Nav_Hover.png') no-repeat 10px 20px; 
} 

Where 10px is the horizontal positioning and 20px the vertical.
Or just use background-position as mentioned before.