Unnamed

#navlist
{
    margin: 0;
    padding: 0 0 20px 0;
}

#navlist ul, #navlist li
{
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

#navlist a
{
    text-transform:uppercase;
    padding-right:1px;
    padding-left:1px;
    float: left;
    line-height: 14px;
    font-weight: bold;
    margin: 0 5px 4px 5px;
    text-decoration: none;
	font-size:12px;
    color: #999;
}
.nav_1 {border-bottom: 4px solid #d47650;}
.nav_2 {border-bottom: 4px solid #d8ab50;}
.nav_3 {border-bottom: 4px solid #57af41;}
.nav_4 {border-bottom: 4px solid #6aa4ca;}
.nav_5 {border-bottom: 4px solid #c190bd;}
.nav_6 {border-bottom: 4px solid #b37173;}

.nav_1 a:hover {background: #d47650;color: #fff;}
.nav_2 a:hover {background: #d8ab50;color: #fff;}
.nav_3 a:hover {background: #57af41;color: #fff;}
.nav_4 a:hover {background: #6aa4ca;color: #fff;}
.nav_5 a:hover {background: #c190bd;color: #fff;}
.nav_6 a:hover {background: #b37173;color: #fff;} 

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="index.html" class="nav_1" title="Home">Home</a></li>
		<li><a href="#" class="nav_2" title="Stories ">Stories </a></li>
		<li><a href="#" class="nav_3" title="Videos ">Videos</a></li>
	        <li><a href="#" class="nav_4" title="Characters">Characters</a></li>
		<li><a href="#" class="nav_5" title="Downloads">Downloads</a></li>
		<li><a href="Forum.html" class="nav_6" title="Forum">Forum</a></li>
	</ul>
</div>