<div id="menu">
<ul>
<li><a class="active" href="#">National</a></li>
<li><a href="#">East Coast</a></li>
<li><a href="#">Surf Watch</a></li>
</ul>
</div>

#menu {height:100%; background:#fff url(images/menubg_03.jpg) repeat-x bottom left; border-top:1px solid #003399; border-bottom:10px solid #ccddff;}
#menu ul {margin:6px 40px;}
#menu ul li {margin-right:9px; list-style:none; display:inline;}
#menu ul li a {color:#2c3d70; text-decoration:none; font-weight:bold; padding:3px 6px 6px 6px;}
#menu ul li a:hover {text-decoration:underline;}
#menu ul li a.active {color:#2c3d70; background:#ccddff;}

Images for My Simple Horizontal Menu

menubg_03.jpg