This is a basic navigation using lists and styled with CSS.
In the decorative items - we set our styles to have a border on the left of our buttons, but we don't want the first item to have it on the left of it, so by telling the first-child to have none, it deletes that first border.
The HTML
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html"> Our Products</a></li>
<li><a href="news.html">In the News</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
The CSS Styles
#navbar {font-size: 12px; clear: left; float: left;
width: 100%; overflow: hidden; background-color: #333; }
#navbar ul {margin: 0; padding: 0; }
#navbar ul li {list-style-type: none; float: left;
margin: 0; padding: 0; position: relative; right: 50%;}
#navbar a:link, #navbar a:visited {display: block;
text-decoration: none; margin: 3px 0px;
padding:7px 30px; color: #eee; background-color: #111;
/* decorative items */
border-left: 8px solid #777; font-weight: bold;
letter-spacing: 1px; text-transform: uppercase;
font-family: arial, helvetica; sans-serif;}
#navbar a:hover {background-color: #6bb; color: #000;
font-weight: bold; }
#navbar li:first-child a, #navbar li:first-child a:hover
{border-left:none;}