Horizontal Menus - CSS + Images 01.

CSS Code

#navbar {font:bold .76em Tahoma, Arial, sans-serif;width:100%;margin:0;padding:0;float:left;border-bottom:6px solid #000;background:url("bgnavhr01.gif") repeat-x top;}
#navbar ul {margin:0;padding:0 0 0 10px;list-style:none;}
#navlist li {display:inline;float:left;list-style:none;}
#navlist li a {float:left;text-decoration:none;margin:0;padding:0 0 0 6px;}
#navlist li a span {float:left;display:block;margin:0;padding:8px 10px 2px 4px;color:#000;cursor:pointer;}
#navlist li #current, #navlist li a:hover{background:url("bgnavhr01-left.gif") no-repeat left top;}
#navlist li #current span, #navlist li a:hover span{color:#fff;background:url("bgnavhr01-right.gif") no-repeat right top;}

HTML Code

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