CSS
/* Barra di Navigazione */
div#nav ul{
width: 576px;
height: 46px;
overflow: hidden;
list-style-type: none;
margin: 0;
margin-bottom: 0px;
padding: 0;
background: url(matrix-menubar.gif)
no-repeat;
}
div#nav li{
margin: 0;
padding: 0;
}
div#nav li,div#nav a{
float: left;
margin-top: -1px;
width: 144px;
height: 47px;
}
div#nav a{
text-indent: -9000px;
text-decoration: none;
padding: 48px 0 0 0;
overflow: hidden;
height: 47px; /**/
background: url(matrix-menubar.gif);
}
/* homepage */
li#homepage a{
background-position: 0 0;
}
li#homepage a:hover{
background-position: 0 -47px;
}
/* products */
li#products a{
background-position: -145px 0px;
}
li#products a:hover{
background-position: -145px -47px;
}
/* where*/
li#where a{
background-position: -291px 0px;
}
li#where a:hover{
background-position: -291px -47px;
}
/* information*/
li#info a{
background-position: -437px 0px;
}
li#info a:hover{
background-position: -437px -47px;
}
(X)html
<body id="home">
<div id="container">
<div id="header">
<img alt="image"
id="logo" src="logo.gif" />
<div
id="nav">
<ul>
<li
id="homepage">
<a
title="Homepage" href="#">Homepage</a>
</li>
<li
id="products">
<a
title="Products" href="#">Products</a>
</li>
<li
id="where">
<a
title="Where" href="#">Where</a>
</li>
<li
id="info">
<a
title="Informations" href="#">Info</a>
</li>
</ul>
</div>
</div>
<div id="css">