1
00:00:00,090 --> 00:00:07,680
With our main styles created we can now go ahead and create the styles for our navigation menu the navigation

2
00:00:07,680 --> 00:00:11,310
links will be contained within an unordered list.

3
00:00:11,310 --> 00:00:15,780
And for this reason we'll start by creating a rule for our well elements.

4
00:00:15,850 --> 00:00:20,130
I'll just create a comment to separate our main styles from the navigation bar.

5
00:00:21,400 --> 00:00:22,680
And this is our first style here.

6
00:00:23,220 --> 00:00:26,740
So for the other elements we've set the list style type to none.

7
00:00:26,820 --> 00:00:33,460
And this will make sure that there's no bullets or numbering next to each item in the list of the margin

8
00:00:33,520 --> 00:00:37,080
padding is set to zero in the background color is set to block.

9
00:00:37,180 --> 00:00:43,240
Next we'll create a list rule and give it a float definition of left.

10
00:00:43,240 --> 00:00:47,700
This will make sure that all the links appear in one row next to one another.

11
00:00:47,770 --> 00:00:53,670
Also set a border right definition and set the values to one pixel solid.

12
00:00:53,860 --> 00:00:59,230
And this hex code for the color we need to create a rule for the last element in the list which is the

13
00:00:59,260 --> 00:01:03,440
contact link and what we want to do is want to make.

14
00:01:03,520 --> 00:01:05,500
We don't want a border at the end of this one

15
00:01:08,670 --> 00:01:13,700
so set the last child attribute of the list property.

16
00:01:13,700 --> 00:01:14,810
Give it a border right.

17
00:01:14,810 --> 00:01:15,910
None.

18
00:01:15,950 --> 00:01:17,580
Definition.

19
00:01:18,330 --> 00:01:21,110
Now we'll create a definition for the link elements in the list

20
00:01:25,190 --> 00:01:28,680
so for any a attribute contained within a list element.

21
00:01:29,630 --> 00:01:35,470
We've set the Display display to block colored to white text alignment to center.

22
00:01:35,810 --> 00:01:41,760
We've added a bit of padding around the text and no text decoration.

23
00:01:41,830 --> 00:01:45,980
We'll need to create a rule for the mouse over effect that you see here.

24
00:01:48,030 --> 00:01:49,790
And so this is how it's done.

25
00:01:49,820 --> 00:01:54,330
Just create a background color definition and set it to this hex code.

26
00:01:54,560 --> 00:01:56,870
And that's what's going to give this effect here.

27
00:01:56,870 --> 00:02:03,460
Lastly we'll create a rule to set the background color of the first link to blue.

28
00:02:03,770 --> 00:02:08,540
So this will be an active link just to indicate the user what page they're on

29
00:02:11,530 --> 00:02:16,050
and so it's it's an active class with a background color set to this hex code.