Menu Four - css background image, bookmark 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 four.

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

Adjust the top padding (highlighted in red), until the text is vertically centered on the unhovered image.

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.

The margin: 0 -5px 0 0; overlaps the image to the right -5px on the left image.

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: 0 -5px 0 0;
text-align: center;
}
#content #menu_h li.nav1 a, #content #menu_h li.nav1 a:visited {
display: block;
width: 100px;
height: 56px;
padding: 16px 0 0 0;
background: url(../css_dev/images/pop5.gif) 0 0 no-repeat;
color: #000;
font: bold 14px/40px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {      
background-position: -100px 0;
}

Menu Four - css background image, bookmark effect

The HTML

CSS notes

Horizontal menu css

Coloured background images used