This is very simple CSS Rollover Navigation.
The anchor tags or links start out all in one line and are centered. These are within a div set up specifically for the navigation. I wanted to style these in this area, so I gave the div an ID of "nav1".
On Your HTML Page - set up your navigation
<div id="nav1">
<a href="index.html">HOME</a>
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="accessories.html">Accessories</a>
<a href="contact.html">Contact Us</a>
</div>
On Your CSS External Page or in the CSS style section in the head of your HTML document
I gave the #nav a overall width, a height, a background color and padding.
I also wanted the navigation to be centered. (The following information would be placed in the CSS style section in the head of your document or on your CSS external style sheet)
#nav1 { width: 800px;
height: 40px;
background-color: #aeb8e4;
padding-top: 20px;
text-align: center;
}
Next I define or style my links. I style the a:link and a:visited at the same time because I want them to look the same. I put a comma between them.
#nav1 a:link, #nav1 a:visited {
Each link becomes a button - so I need to define padding around them. Plus I want the buttons names centered within each button. I used short hand to write out the padding, the 15px 25px refers to the top first, then right, then bottom , then left -- or 15px for the top, 25px for the right, 15px for the bottom and 25px for the left - it works in a clockwise fashion.
padding: 15px 25px;
text-align: center;
Next, I gave it a background color, a font size and a color for the font:
background-color: #455899;
font-size: 20px;
color: #d6ddfa;
The last information for this style is all decorative. I get rid of the default link underline with text-decoration: none, space the letters out a bit and give each button a border on the left and right.
text-decoration: none;
letter-spacing: 1px;
border-left: 2px solid #d6ddfa;
border-right: 2px solid #d6ddfa;
}
Because this is Rollover Navigation, I need to define a hover state. To make it contrast, I change the colors on the background, font, and borders.
#nav1 a:hover {background-color: #d6ddfa;
color: #455899;
border-left: 2px solid #455899;
border-right: 2px solid #455899;
}
That's all. Simple Rollover Navigation. Next we will create navigation using lists, starting with more horizontal navigation.