Okay you need to use that in your code where the sprite is called to - also, the reason the overlay isn't working is that you're setting the background of the LI to the image and then telling it to change when the a within each li is hovered.
So what you need to do is edit your CSS and remove the a:hover, changing it to liclass:hover
Yes, what you need to do next is make sure that you arrange the padding/margins, heights & widths of each list item so that when it is rolled over there is space for it and it looks more natural.
I used Sprite Cow for the positioning. I need help with the css! Thanks!
http://codepen.io/anon/pen/Logtb
Where is the image sprite being hosted?
the image is local I can upload it somewhere
http://img685.imageshack.us/img685/971/spriteyg.png
Okay you need to use that in your code where the sprite is called to - also, the reason the overlay isn't working is that you're setting the background of the LI to the image and then telling it to change when the a within each li is hovered.
So what you need to do is edit your CSS and remove the a:hover, changing it to liclass:hover
Did you try to erase the white background by zooming in? You can just remove the white background layer and save as .png.
liclass:hover?? do you mean ; #navigation .uac li.hover ??? or #navigation .uac li:hover??
Apologies. What I meant was the a:hover needed to be changed to just the classname for each li.
I've edited it for you;
http://codepen.io/andyunleashed/pen/xoCdG
THANKS!! do you know why when I hover over the image it moves? how can I fix this?
Yes, what you need to do next is make sure that you arrange the padding/margins, heights & widths of each list item so that when it is rolled over there is space for it and it looks more natural.
Thanks!