Horizontal Menus - Simple CSS 05.

CSS Code

#navbar {font:bold .76em Tahoma, Arial, sans-serif;margin:0;padding:0;width:100%;float:left;background:#fff;}
#navbar ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist li, #navlist li a {display:block;list-style:none;position:relative;border:1px solid #000;float:left;}
#navlist li {border-width:1px 0;margin:0 2px;}
#navlist li a {border-width:0 1px;margin:0 -1px;padding:5px 8px;background-color:#3cc;text-decoration:none;color:#fff;}
#navlist li a:hover {background-color:#cff;color:#000;}
#navlist li > a:hover, #navlist li:hover {border-color:#000;}

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