This tutorial teaches you how to fix a loading problem with images in a menu CSS layout. This CSS tutorial has ONLY image links and though it is better to have rollover images with actual text above the images, this tutorial covers the preload problem when your menu is ONLY images.

click here to watch

Below is the Corresponding CSS:

#menu p {

display: none;

}

#menu {
height: 84px;
width: 514px;
float: left;
background-image: url(../images/menu.jpg);
background-repeat: no-repeat;
background-position: top center;

}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
margin: 0;
padding: 0;
}

#menu ul li a {
display: block;
width: 85px;
height: 84px;
margin: 0;
padding: 0;
}

#menu ul li#gallery a {
background-image: url(../images/MenuGalleryOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}

#menu ul li#gallery a:hover {
background-image: url(../images/MenuGalleryOver.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu ul li#clients a {
background-image: url(../images/clientResultsOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}

#menu ul li#clients a:hover {
background-image: url(../images/clientResultsOver.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu ul li#fitness a {
background-image: url(../images/fitnessLibraryOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}

#menu ul li#fitness a:hover {
background-image: url(../images/fitnessLibraryOver.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu ul li#ask a {
background-image: url(../images/askProsOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}
#menu ul li#ask a:hover {
background-image: url(../images/askProsOver.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu ul li#calendar a {
background-image: url(../images/clubCalendarOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;
}

#menu ul li#calendar a:hover {
background-image: url(../images/clubCalendarOver.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#menu ul li#store a {
background-image: url(../images/resultsStoreOver.jpg);
background-repeat: no-repeat;
background-position: center 100px;}

#menu ul li#store a:hover {
background-image: url(../images/resultsStoreOver.jpg);
background-repeat: no-repeat;
background-position: 0px top;
}