With our main styles created we can now go ahead and create the styles for our navigation menu the navigation
links will be contained within an unordered list.
And for this reason we'll start by creating a rule for our well elements.
I'll just create a comment to separate our main styles from the navigation bar.
And this is our first style here.
So for the other elements we've set the list style type to none.
And this will make sure that there's no bullets or numbering next to each item in the list of the margin
padding is set to zero in the background color is set to block.
Next we'll create a list rule and give it a float definition of left.
This will make sure that all the links appear in one row next to one another.
Also set a border right definition and set the values to one pixel solid.
And this hex code for the color we need to create a rule for the last element in the list which is the
contact link and what we want to do is want to make.
We don't want a border at the end of this one
so set the last child attribute of the list property.
Give it a border right.
None.
Definition.
Now we'll create a definition for the link elements in the list
so for any a attribute contained within a list element.
We've set the Display display to block colored to white text alignment to center.
We've added a bit of padding around the text and no text decoration.
We'll need to create a rule for the mouse over effect that you see here.
And so this is how it's done.
Just create a background color definition and set it to this hex code.
And that's what's going to give this effect here.
Lastly we'll create a rule to set the background color of the first link to blue.
So this will be an active link just to indicate the user what page they're on
and so it's it's an active class with a background color set to this hex code.