Menu Two - css background image, with opacity

The HTML

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

CSS notes

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).
filter:alpha(opacity=60) is for IE, -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;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}
.nav1 a:hover {
opacity: 0.9;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
-khtml-opacity: 0.9;
}

Vertical menu css