Transparent Little Dropdown Menu

By Jacqueline Sinex, Wednesday, August 25, 2010
Transparent Image
Photo by Markus Spiske on Pexels

So you have some dropdown menus on your website, but you would like to make them a little fancier.  With just a little effort in your stylesheet, you can add a nice transparency effect to the background of the dropdown list.

The CSS is usually applied to the style id created for the drop-down div.  Perhaps it is something like #subnav or #subnav li (which is the list item inside the div).  Just remember if you start making list items transparent, they may look a bit fuzzy.  So you might need to use darker text like black to remain legible.

Opacity is recognized as part of the whole number 1. 1 stands for 100% solid color.  You can really choose any color as the base background, but you made need to experiment with it as you change the opacity.  So if you decide to create a 70% opaque menu, just add this as your line in the CSS style:

opacity: 0.7;

But wait, it looks lovely in Firefox yet nothing seems to have happened in Internet Explorer.  Still another bit to add:

filter: alpha(opacity=70);

With these 2 lines you have covered most of the commonly used modern browsers, your menu still works, and you have added a little something nifty to the design.

Posted in: Austin Web Design, How To, Web Development, WWW Learning Center

Comments are closed.