Gray Horizontal List
HTML
<div id="navigationcontainer">
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul></div>
CSS
#navcontainer ul
{
padding: 0;
margin: 0;
background-color: #666666;
float: left;
width: 100%;
}
#navigationcontainer ul li { display: inline; }
#navigationcontainer ul li a
{
background-color: #666666;
color: ffffff;
text-decoration: none;
float: left;
border-right: 1px solid #ffffff;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
#navigationcontainer ul li a:hover
{
background-color: #999999;
color: #ffffff;
}
