Using CSS to create your site’s navigation is becoming increasingly popular since it allows you to minimize code and create fast loading menu systems. Here is a basic horizontal navlist using one image for a downward pointer that you can use in any situation where you need a simple menu.First we need to start with the basic HTML code for your navlist. This can be inserted in two ways.

1. Use the id=”nav” in the <ul> tag
2. Create a <div> wrapper to contain the <ul> and assign the id=”nav’ to the div

Here’s the HTML:

	
Home
	
Photos
	
Videos

	
Add a Restaurant
	
Delete a Restaurant
	
Logout

Notice it’s just a standard HTML unordered list. Nothing fancy nor is it hard to reproduce. The magic occurs in the CSS formatting to give it the look and feel you want.

Here’s the CSS:

Let’s explain this simple code so you understand how these particular selectors change the appearance of the typical list:

1. First the navigation bar is created with #nav, margins and background color
2. Next we have to set the li to list-style: none; to get rid of the bullets
3. At the same time we use display:inline; to force the list items to go horizontal
4. Some padding it also added in order to move the boundaries of the nav bar to equal proportions above and below the text
5. The font family, size, weight, color and style is chosen
6. We add the ‘hover’ effect to the actual hyperlink by having a color change
7. Now we add the ‘hover’ effect to the entire padded link
8. Last we add the ‘hover’ effect to the
9. element itself which produces the downward pointer image

The final output will look like this:

• Horizontal Navlist Demo