Gray Horizontal List with Bottom Image on Hover
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="#" class="borderright">Link 6</a></li>
</ul></div>
CSS
#navigationcontainer ul
{
padding: 0;
margin: 0;
background-color: #FFFFFF;
width: 100%;
}
#navigationcontainer ul li { display: inline; }
#navigationcontainer ul li a
{
background-color: #CCCCCC;
color: #000080;
text-decoration: none;
float: left;
padding-top: 7px;
padding-right: 12px;
padding-bottom: 10px;
padding-left: 12px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
background-image: url(images/nav/solidgray.gif);
}
#navigationcontainer ul li .borderright {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
}
#navigationcontainer ul li a:hover
{
background-image: url(../images/nav/blueunderline.gif);
background-repeat: no-repeat;
background-position: center bottom;
color: #000080;
text-decoration: none;
}
Image
