>> Almost every website needs a navigate menu if you have multiple pages of content.
You can create a lightweight navigation menu to let users easily navigate your website using CSS, lists, and the nav element.
Feel free to download and unzip the project files to follow along on your own.
Here I have a page that's almost finished.
I'm going to style this unordered list and make it the main menu navigate for the page.
Working in split view, you can see the unordered list is contained within the nav element for the page.
The nav section holds the main navigate links.
I've already gone ahead and added the anchor links to turn these list items into hyperlinks.
If we preview this file in a web browser, by coming up to the file menu, and from the file menu, we choose Preview in Browser, I can test the links, and you can see that they work.
However, it's not yet styled to look like the main menu of a webpage.
Let's go back into Dreamweaver and fix that.
I've taken a shortcut by already defining a CSS rule for the nav selector.
I'll go ahead and do a search within the CSS designer to show you that.
This allows me to position to the right of the page where I want it.
Now let's take a look at some additional properties we can add to make it look like a nicely-styled menu.
First, I'm going to remove the bullets from the display.
This is a property I'll set for the whole list.
So I'll select style.css from the CSS designer, and I'll come over to select my CSS file so we can see the changes being applied in real time.
Then I'll come back to the CSS designer and add a UL selector.
Then, in the properties, I'll go to the text category and set the list style type to None.
The bullets are removed from the display although list items are still stacked.
Some HTML elements such as list items will display a new line by default unless you use CSS to tell it to do something different.
To do this, I'll update the existing LI selector which currently styles the font and spacing properties.
I'll add the display property, and I'll set its value to in-line block.
Notice the list items are now displayed next to each other on the same line.
For one last bit of styling, I'll add CSS to make the text color change when the end user mouses over the menu selection.
Pseudoselectors enable you to style an element when its state changes such as when a user moves over a link.
Let's add a pseudoselector for the anchor, or A selector.
To do this, I'll go to the CSS designer and I'll add a new selector using the name of the anchor tag, which is A, a colon, then I'll select the action which is hover in this case.
Then go to the text category and change the color to red.
Now, when I mouse over the list items in LiveView, I can see a subtle change which ultimately improves the look and user experience.
The menu navigate on your page may have different properties such as the number of menu items, colors, and positioning on the page, but you can apply the general techniques covered in this tutorial to style the menu on other webpages.
You may even want to explore CSS transitions to apply different effects to the menu as a visitor interacts with the content on your page.
