Menu Five - css background image, button effect

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 five.

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 background-position: -100px 0; shifts the x axis of the image on hover by 100px. Set it to your image width.

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, #content #menu_h li.nav1 a:visited {
display: block;
width: 100px;
height: 28px;
background: url(../css_dev/images/button5.gif) 0 0 no-repeat;
color: #fff;
font: bold 12px/28px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {      
background-position: -100px 0;
}

Vertical menu css

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

Menu Five - css background image, button effect

The HTML

CSS notes

Horizontal menu css

Vertical menu css

Coloured background images used