Lists - Graphical Horix nav bar

by prasun_sultania

HTML

<ul class="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="clients.htm">Clients</a></li>
<li><a href="case-studies.htm">Case Studies</a></li>
</ul>

CSS

ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
/* overflow: hiddeb clears the float*/
overflow: hidden;
background: #FAA819 url(http://www.mediafire.com/conv/5939daf46bfa4a6fb7051ea0e25e13f622060a8b05650628a23483c8a26974406g.jpg) repeat-x;
}

/*make li to be display horizontally (another way cd be to use display-inlne)*/
ul.nav li {
float: left;
}

/*give anchors padding, and other sizing styles*/
ul.nav a {
    display: block;
    padding: 0 3em;
    line-height: 2.1em;
    text-decoration: none;
    background: url(http://www.mediafire.com/conv/0139d1381603a88c180fb90653441d422d33079de37cf4fb8ac14c64b622f9866g.jpg) repeat-y left top;
    color: #fff;
}

ul.nav li:first-child a {
background: none;
}

ul.nav a:hover, ul.nav a:focus {
color: #333;
}