A cute little menu technique with no javascript!

The CSS code:

body {
background-color: #ffffff;
}

div.nav1 {
height: 50px;
width: 150px;
margin-top:15px;
padding:0;
background-image:url("img/btn_down1.png");
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {
display:block;
}

div.nav1 img {
width:100%;
height:100%;
border:0;
}

div.nav1 a:hover img {
visibility:hidden;
}

div.nav2 {
height: 50px;
width: 150px;
margin-left:153px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down2.png");
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {
display:block;
}

div.nav2 img {
width:100%;
height:100%;
border:0;
}

div.nav2 a:hover img {
visibility:hidden;
}

div.nav3 {
height: 50px;
width: 150px;
margin-left:306px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down3.png");
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {
display:block;
}

div.nav3 img {
width:100%;
height:100%;
border:0;
}

div.nav3 a:hover img {
visibility:hidden;
}

div.nav4 {
height: 50px;
width: 150px;
margin-left:459px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down4.png");
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {
display:block;
}

div.nav4 img {
width:100%;
height:100%;
border:0;
}

div.nav4 a:hover img {
visibility:hidden;
}

div.nav5 {
height: 50px;
width: 150px;
margin-left:612px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down5.png");
}

div.nav5 a, div.nav5 a:link, div.nav5 a:visited {
display:block;
}

div.nav5 img {
width:100%;
height:100%;
border:0;
}

div.nav5 a:hover img {
visibility:hidden;
}

The HTML code:

<div class="nav1">
	<a href="#"><img src="img/btn_up1.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav2">
	<a href="#"><img src="img/btn_up2.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav3">
	<a href="#"><img src="img/btn_up3.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav4">
	<a href="#"><img src="img/btn_up4.png" width="150" height="50" alt="" /></a>
</div>
<div class="nav5">
	<a href="#"><img src="img/btn_up5.png" width="150" height="50" alt="" /></a>
</div>

Each button consists of two images. These images need to be the same size. Also, the CSS images are static - they are always there - they are simply covered by the HTML image on mouse-over. This could make for some interesting effects using transparencies and backgrounds.

Two samples of this code in action can be found here.

Happy coding!