Válido para XHTML 1.0 Estrícto + CSS
Menú
El código:
<style type="text/css">
#menu{
list-style:none;
overflow:hidden;
height:48px;
padding:6px;
}
#menu li{
float:left;
}
#menu a{
text-align:center;
text-decoration: none;
display:block;
outline:none;
}
#menu a:link, #menu a:visited{
background:#00f url(fotomenu.png) no-repeat 0 0;
width:24px;
height:24px;
margin:6px;
}
#menu a:hover{
background:#0f0 url(fotomenu.png) no-repeat -24px 0;
width:48px;
height:48px;
margin:-6px;
position:relative;
}
#menu a:focus, #menu a:active{
background:#f00 url(fotomenu.png) no-repeat 0 -24px;
width:24px;
height:24px;
margin:6px;
}
</style>
Como implementarlo:
<ul id="menu"> <li><a href="pagina1.html">1</a></li> <li><a href="pagina2.html">2</a></li> <li><a href="pagina3.html">3</a></li> <li><a href="siguiente.html" class="next"></a></li> </ul>
La imagen (fotomenu.png):
