<style type="text/css">
#basic {
position: absolute;
left: 450px;
top: 200px;
}
ul {
list-style-type: none;
}
ul a {
text-decoration: none;
display: block;
width: 400px;
}

a#menu1{
background-image: url(http://phpbasic.com/phpbasic_data/include/c1.jpg);
height: 116px;
}
a#menu1:hover{
background-image: url(http://phpbasic.com/phpbasic_data/include/c2.jpg);
}

a#menu2{
background-image: url(http://phpbasic.com/phpbasic_data/include/h1.jpg);
height: 40px;
}
a#menu2:hover{
background-image: url(http://phpbasic.com/phpbasic_data/include/h2.jpg);
}
a#menu3{
background-image: url(http://phpbasic.com/phpbasic_data/include/m1.jpg);
height: 32px;
}
a#menu3:hover{
background-image: url(http://phpbasic.com/phpbasic_data/include/m2.jpg);
}
a#menu4{
background-image: url(http://phpbasic.com/phpbasic_data/include/b1.jpg);
height: 42px;
}
a#menu4:hover{
background-image: url(http://phpbasic.com/phpbasic_data/include/b2.jpg);
}
a#menu5{
background-image: url(http://phpbasic.com/phpbasic_data/include/p1.jpg);
height: 64px;
}
a#menu5:hover{
background-image: url(http://phpbasic.com/phpbasic_data/include/p2.jpg);
}
</style>

<div id="basic">
<ul>
<li><a id="menu1" title="menu1" accesskey="1" href="#"></a></li>
<li><a id="menu2" title="menu2" accesskey="2" href="#"></a></li>
<li><a id="menu3" title="menu3" accesskey="3" href="#"></a></li>
<li><a id="menu4" title="menu4" accesskey="4" href="#"></a></li>
<li><a id="menu5" title="menu5" accesskey="5" href="#"></a></li>
</ul>
</div>