Bueno, ya que habia empezado a ponerme a hacerlo, aquí lo dejo, por si alguien lo ve algún dia, espero que fuera esto lo que bucabas
:
El html para el menú:
Código HTML:
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<ul>
<li class="menu1"><a href="#"> </a></li>
<li class="menu2"><a href="#"> </a></li>
<li class="menu3"><a href="#"> </a></li>
<li class="menu4"><a href="#"> </a></li>
<li class="menu5"><a href="#"> </a></li>
<li class="menu6"><a href="#"> </a></li>
</ul>
</body>
</html> Y el CSS:
Código:
.menu1, .menu2, .menu3, .menu4, .menu5, .menu6 {
background-image: url('menunb.png');
background-repeat: no-repeat;
width: 33px;
list-style-type: none;
}
.menu1 {
background-position: 0 0px;
height: 100px;
padding: 0px;
margin: 0px;
}
.menu1 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:100px;
padding-left: 33px;
}
.menu2 {
background-position: 0 -100px;
height: 85px;
}
.menu2 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:85px;
padding-left: 33px;
}
.menu3 {
background-position: 0 -185px;
height: 98px;
}
.menu3 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:98px;
padding-left: 33px;
}
.menu4 {
background-position: 0 -283px;
height: 98px;
}
.menu4 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:98px;
padding-left: 33px;
}
.menu5 {
background-position: 0 -381px;
height: 106px;
}
.menu5 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:106px;
padding-left: 33px;
}
.menu6 {
background-position: 0 -487px;
height: 87px;
}
.menu6 a {
text-decoration: none;
padding-top: 0px;
padding-bottom:87px;
padding-left: 33px;
}
Tardo 5 min en aprender a usar el editor avanzado y... ale, a dar miles de respuestas xD