Banner Area

The CSS Styles

nav {height: 35px; padding-top: 5px; margin-bottom: 5px;}

ul, li {padding: 0; margin: 0;}

nav ul {list-style:none;
padding: 10px 0;
background-color: #374e17;}

nav li {display: inline;}

nav a {color: #ffffff;
padding: 10px 25px;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;}

/* I added a hover state with a background image */

nav a:hover {background-color: #792d0b; background-image: url(images/limes.jpg); }

Main Content Section

This navigation bar uses a List to give each button shape. They become block elements. The CSS styles are what make it a bar instead of a list.

display: inline; tells the individual buttons to be one right after another in a line. Text-decoration: none; deletes the underline.

The HTML

<nav>
<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>
</nav>