Menu Two - css background image, with opacity

The HTML

The HTML for this menu can be found on the menu index page.

CSS notes

The CSS for this menu can be found at css menu two.

Adjust the width & height for the menu background image size, change the line-height (highlighted in red) to match the height for vertically aligning the text.

Change the background: url(path/file.gif) 0 0 no-repeat; to the path and image file name you want loaded.

The opacity: 0.6; is for all browsers and is adjusted from 0.1 (more opaque) to 1.0 (less opaque or fully transparent).
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; is for IE8, filter:alpha(opacity=60) is for early IE browsers (IE5, IE6 & IE7), -moz-opacity: 0.60; is for older Mozilla browsers and -khtml-opacity: 0.6; is for older Safari browsers.

Note: Setting the opacity to 0.9 instead of 1.0, will eradicate a flicker on hover bug in Firefox and Safari.

Change the #content to whatever your container id is.

Horizontal menu css

/* change the #content to whatever your container id is */
#menu_h li {
float: left;
list-style: none;
margin: 2px;
text-align: center;
}
#content #menu_h li.nav1 a {
display: block;
width: 100px;
height: 32px;
background: url(../css_dev/images/opacity-gn.gif) 0 0 no-repeat;
color: #333;
font: bold 12px/32px verdana;
text-decoration: none;
}

Horizontal & vertical menu opacity css

.nav1 a, .nav1 a:visited {
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}
.nav1 a:hover {
opacity: 0.9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 0.90;
-khtml-opacity: 0.9;
}

Vertical menu css