Snazy Border Menu

From Stu Nicholls at CSS Play

Although every care has been taken I would suggest you see the working menus on there origional site and read of any bugs or fixes.



Grab The Code Here

Simple Tabbed Navigation

Simple to use tabbed navigation that can be changed quickly. Change the width dimension to suit the overall length of the tabs.

<------------------------------ width:543px; ------------------------------->

CSS

#navigation {padding: 3px 0; margin: 0px;
width:543px;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;}

#navigation li {list-style: none; margin: 0;
display: inline;}

#navigation li a {padding: 3px 0.5em; margin-left: 3px;
border: 1px solid #778; border-bottom:none;
background: #DDE;
text-decoration: none;}

#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {color: #000; background: #AAE;
border-color: #227;}

HTML

<ul id="navigation"> <li><a href="index.html" id="current">Home</a></l> <li><a href="boxes-borders.html">Boxes</a></l> <li><a href="layers.html">Layers</a></l> <li><a href="navigation.html">Navigation</a></l> <li><a href="popup.css">Pop Ups</a></l> <li><a href="rounded_boxes.html">Rounded Boxes</a></l> <li><a href="contact.html">Contact</a></l> </ul>