<style type="text/css">
#basic ul{
position:relative;
list-style:none;
padding: 0px;
margin: 0px;
width:174px;
height:183px;
background: url(http://phpbasic.com/phpbasic_data/include/base.gif) no-repeat left top;
}
#basic a{
position:absolute;
display:block;
left:0px;
height:12px;
text-decoration:none;
font: bold 9px Verdana,Arial,Helvetica,sans-serif;
color:#000000;
z-index:2;

background: url(http://phpbasic.com/phpbasic_data/include/puces.gif) no-repeat top left;
}


#basic a:hover{
color:#A99D49;
width:174px;

z-index:1;
}

#basic #menu1{
top: 35px;

padding-left: 58px;

background-position: 0% 0%;
}

#basic #menu1:hover{
top: 0px;
padding-top: 35px;

background-position: 0% -72px;
}

#basic #menu2{
top: 53px;
padding-left: 57px;
background-position: 0% -12px;
}

#basic #menu2:hover{
top: 0px;
padding-top: 53px;
background-position: 0% -119px;
}

#basic #menu3{
top: 71px;
padding-left: 54px;
background-position: 0% -24px;
}

#basic #menu3:hover{
top: 0px;
padding-top: 71px;
background-position: 0% -184px;
}

#basic #menu4{
top: 89px;
padding-left: 50px;
background-position: 0% -36px;
}

#basic #menu4:hover{
top: 0px;
padding-top: 89px;
background-position: 0% -267px;
}

#basic #menu5{
top: 107px;
padding-left: 44px;
background-position: 0% -48px;
}

#basic #menu5:hover{
top: 0px;
padding-top: 107px;
background-position: 0% -368px;
}

#basic #menu6{
top: 125px;
padding-left: 37px;
background-position: 0% -60px;
}

#basic #menu6:hover{
top: 0px;
padding-top: 125px;
background-position: 0% -487px;
}
</style>
<div id="basic">
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>

<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>
</div>