Horizontal Menus - Simple CSS 02.

CSS Code

#navbar {font:bold .76em Tahoma, Arial, sans-serif;width:100%;margin:0;padding:0;float:left;background:#fff;}
#navbar ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist li {display:inline;list-style:none;}
#navlist li a, #navlist li a:link {margin:0;padding:6px 9px 6px 10px;background-color:#000;color:#fff;text-decoration:none;float:left;border-right:1px solid #fff;}
#navlist li a:hover, #navlist li a:active {color:#ff0;text-decoration:none;padding-top:4px;background:#333;}
#navlist li #current {color:#ff0;border-color:#fff;background:#333;}

HTML Code

<div id="navbar">
	<ul id="navlist">
		<li><a href="#" id="current">Menu List 01</a></li>
		<li><a href="#">Menu List 02</a></li>
		<li><a href="#">Menu List 03</a></li>
		<li><a href="#">Menu List 04</a></li>
		<li><a href="#">Menu List 05</a></li>
		<li><a href="#">Menu List 06</a></li>
	</ul>
</div>
Back to top