This is really a very simple thing.  Ready?

(NOTE: Before you start tweaking your CSS file, make a copy you can revert to or look at in case something goes awry.  You should know that and probably do, but just over communicating that concept)

Let’s make sure we are on the same page.  Visit this site by clicking the image (right) and scroll over the blue nav bar (actually referred to in the CSS stylesheet as “subnav”).  What you will see is that the nav background in the drop-down menu is semi-transparent.  In other words you can see some of the page behind the nav menu as if the nav drop down was a colored gel sheet. First a medium blue then a dark gray on the roll-over.  This website also uses the same idea.

The CSS out of the box (common WordPress menu style with drop down) was a solid color and the code for the drop down menu looked like this (key is the “li ” called the selector):

For the subnav bar drop down:

#subnav li a:hover, #subnav li a:active {
background: #000066;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #000066;
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #006699;
margin: 0px;
padding: 6px 10px 6px 10px;
}

Note the property, “background”.  The two colors shown are a darker and lighter hue of blue.  But I wanted them to be semi-transparent just for the effect.  Kinda trendy these days.

By looking at the code just previous to this I discovered that the height of the subnav was coded to be 24 pixels.  Simple.  See below:

#subnavbar {
background: #003366;
width: 960px;
height: 24px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}

OK, so the detective work is done.  Now to make this semi-transparent.

So, next step is to create a transparent .PNG file in Fireworks, Photoshop, Illustrator, whatever you’re comfortable with. Make it, of course, 24 x 150 pixels?  No.  Well, yeah you could, but why?  Just make it the correct height (24px) and wide enough you can see it.  I made mine 10px wide.

For now,  just make your simple 10px X 24px rectangle.  I made mine blue (#006699) and changed the transparency to 80%. Save it with a unique name you can remember.  Then make a second one that is a darker (or lighter depending on your font colors).  I made the second one black (#000000) with 80% transparency so it actually looks kind of gray.  Again save.

Now go back to the same code as above and change it like so:

#subnav li a:hover, #subnav li a:active {
background-image:url(images/sunav_bkd_trans_rec.png);
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6pEditx 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background-image:url(images/sunav_bkd_trans_rec.png);
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background-image:url(images/sunav_bkd_trans_gray.png);
margin: 0px;
padding: 6px 10px 6px 10px;
}

(NOTE: Depending on the menu style you may need to simply call the image via “background: url(images/yourimage.png);” On this website I had to use that.  So try that if “background-image :” doesn’t work)

You’re done!

Now upload the new CSS and two new .PNG image files and check out your fancy transparent menu in CSS.

Now that wasn’t hard, was it?

Of course your CSS file may be slightly different but not much.  That is the great thing about CSS: it is a standard and most items like drop downs are fairly consistent site to site.  Just gotta know what to look for and be willing to try this then try that.  Eventually it will be second nature.

Enjoy!

_____________________

(PS: Checked it in IE7, FF & Safari)

Leave a Reply