Válido para XHTML 1.0 Estrícto + CSS
Menú
El código:
<style type="text/css">
#menu{
list-style:none;
overflow:hidden;
}
#menu li{
float:left;
}
#menu a{
font:0.8em serif;
margin:1px;
text-align:center;
text-decoration: none;
height:17px;
width:19px;
display:block;
}
#menu a:link, #menu a:visited{
color:#000;
background:#fff url(menu-num-i.png) no-repeat -38px 0px;
}
#menu a:hover{
color:#fff;
background:#069 url(menu-num-i.png) no-repeat -19px 0px;
}
#menu a:focus, #menu a:active{
color:#fff;
background:#69c url(menu-num-i.png) no-repeat 0px 0px;
}
#menu a.next{
color:#333;
background:#69c url(menu-num-i.png) no-repeat -57px 0px;
}
</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 (menu-num-i.png):
