Does anyone know of any examples of a transparent/opaque drop down menu? We’re trying to tidy up our site with a vertical drop-down menu but want to make sure it is cross-browser friendly, preferably no Javascript.
site is listed below in signature.
Any tips would be much appreciated!
Any item can have opacity applied to it, there are two ways you can achieve this. If you can either use PNG files with transparency applied (which will unfortunately increase the load on your server and the bandwidth usage) and nest them as images in your list for each item (however you will need to script the opacity in for IE6) or you can use the CSS opacity values, which will work however your CSS will no longer validate but should do the trick all the same.
CSS Opacity isn’t a good idea because it’ll make the text inside the dropdown transparent as well. Use a semi-transparent png for the background. It’ll naturally turn to a solid color in IE6. If you’re not happy with that, use the DD Belated PNG script.
Surely if you wanted opacity you would want the slight transparency to apply to everything within the menu, and even if you did not want the text to suffer opacity than that can be remedied by increasing the opacity of the text within the semi-transparent dropdown.
Does anyone know of any examples of a transparent/opaque drop down menu?
Yes, Paul has an example of one Found Here. It is a drop-up menu though, but looking at the code you should be able to see how the transparency is applied.
There is a workaround that will Prevent Transparent Text when using opacity.
Here is the “How To Article” on the method.
Take a look at Meyer’s great demo too. It’s at http://meyerweb.com/eric/css/edge/complexspiral/demo.html .
That’s great stuff. Thanks for all the suggestions.
I’m playing around with some demos from the Pmob demos - great site.
This one in particular caught my eye: ‘drop-down-multi-opaque’
Here are a couple of more advanced examples 
First one use transparent png to avoid the text being affected and second one uses opacity for IE.
http://www.pmob.co.uk/temp/dropdown-round-transparent.htm
http://www.pmob.co.uk/temp/dropdown-round-transparent2.htm
Would be nice, but it doesn’t work that way :). If you set opacity 0.8 on the <li> and opacity 1.0 on the <a>, the <a> gets 80% opacity. If you set opacity 0.8 on the <li> and opacity 0.5 on the <a>, the <a> gets 40% opacity. It’s not inheriting the value, it’s using what would be the inherited value as a base. No luck setting opacity greater than 1.0 either.
The only effective methods are mentioned above.