I was trying to add a half transparent background for my selected navigation button, with the same background state for hovering, but ran into problems as I want to have a paragraph description under the button text (as seen here) because, as you all probably know, links are not valid inside paragraphs.
So I decided to set the background and hover state to my <li> instead which looks exactly how I want it. However, at the moment only the button text works as a link and not the paragraph included. (Hope this makes sense!)
post a link to your site. It’s easier to figure out what your problem is if we have the images and everything else to work with. The firebug plugin for firefox can also help you solve a lot of your problems. If you don’t have it, get it. In the mean time, post a link to your site. Also, have you thought about using jquery for this problem. It has the ability to add and remove classes when you click on something. So you might make the text the link, then add the class for the background of your button on hover and remove the class on mouse out. that should solve your problem.
I packaged up a demo for you to see what I mean. If this is what you were wanting. It was tested in firefox and I.E 8. You can download it here
Amazing! Thank you so much Cybershot, this is exactly what I am after.
Perhaps I didn’t make myself clear but the site I linked to, naamtravel.co.uk, is the project that I am working on. I kind of got it working with the hover buttons but without the paragraph text included in the link and nowhere near as smooth as your version. I had no idea jQuery could do that, very useful.
I apologise for the very late reply, the project has been put on the shelf for a while and I just remembered now about this post.
I can’t believe you made me a demo – once again, thank you so much! :D