April 24, 2009, 
Tagged In this tutorial, I am going to show you one of the simplest solutions for making a rollover menu. I used this for our second project at the school which involved making a personal portfolio. This is one of the best ways to make your rollover menu as the cross-browser compatibility is maximum and you save a lot of diskspace and bandwidth. As done in previous tutorials, I will show you the coding first and then I will explain how it is done 
site.css :
.about {
width: 245px;
height: 194px;
float:left;
background: url(aboutme.jpg) no-repeat bottom left;
}
.about a {
display: block;
width: 245px;
height: 194px;
background: url(aboutme.jpg) no-repeat top left;
}
.about a:hover {
background-position: bottom left;
}
Alright, so this is the idea of the CSS coding above: You have both states of the menu item put together in the same file. The first step is to make them both in some image editing software and then put them one on top of each other, both with the EXACT same height and the (imaginary) border line between them should be in the middle. Let’s say you have a menu which has the height of 50px. Considering that, your image file should have the height of 100px ( 2 * 50px ). If you need any help in doing this, please ask in the comments. (The image inserted into the post has been scaled down for you to understand the point).
Our CSS code basically creates a mask of that image file and in the normal state (no mouse over or anything like that) makes the background to be positioned to the bottom left by default. Sure, you will look at the file above and say “well, that is not right, green should be the hover state”. That is true, but let’s not forget that this is a menu and it needs links. That is where the attributes of “.about a” come into place, moving the background to the top left. Let’s move on to the HTML code:
index.htm :
<body> <div class="about"><a href="index.htm"></a></div> </body>
Yeah, the HTML code is that easy All you have to do is to put the div into place and the link between the div tags and you are done. Try to do it without the link and see what your result is. Bingo! To see a live demo, click here. To download the files separately (ZIP archive), click here.
If you have any questions or comments, please feel free to put them in the comment box below.