CSS
body{
margin: 0;
background: #444;
}
div#header{
background: url(bgnav.gif);
position: relative;
height: 140px;
border-bottom: 10px solid #fde050;
}
div#nav,img#logo{
position: absolute;
}
div#nav{
top: 103px;
}
img#logo{
left: 43px;
}
/* Barra di Navigazione */
div#nav ul{
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: 147px;
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: 0px 0px;
}
li#homepage a:hover{
background-position: 0 -47px;
}
/* products */
li#products a{
background-position: -146px 0px;
}
li#products a:hover{
background-position: -146px -47px;
}
/* where*/
li#where a{
background-position: -292px 0px;
}
li#where a:hover{
background-position: -292px -47px;
}
/* information*/
li#info a{
width: 143px;
background-position: -440px 0px;
}
li#info a:hover{
background-position: -440px -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">
