creating a css menu

 

CSS UL LI - Horizontal CSS Menu

31.10.2008 Category: Web Design
In this tutorial we're going to create a professional horizontal CSS menu. First we are going to create a HTML list by using Unordered List (ul) and List Item (li) elements. Then we are going to style the list with CSS (Cascading Style Sheets) into the form of a horizontal navigation menu like in Picture 1.

Picture 1. Horizontal navigation menu that is made with HTML UL and LI elements and styled with CSS.
Previous knowledge about some basic HTML and CSS is required. HTML elements used in this tutorial:

• ul (Unordered List)
• li (List Item)
• a (Anchor / Link)

This is a CSS tutorial so I'm not going to go through the creation of the graphics used in this tutorial. However, you can download the images and even the original PSD file:

• Menu Background Image
• Link Divider
• PSD File

HTML List (ul li) With Links

Let's start by creating a list with links in HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
ul tags define the whole list and each list element is defined with li tags. Additionally each list item is surrounded with link tag (a). In real life situation you will of course replace # with the real URL. In a browser the list looks like in picture 2. My list has only five items but you can have as many as you like. Now the HTML part of the menu is complete. Next we're going to style the menu with CSS.

Picture 2. A basic HTML list created with UL and LI tags.

UL CSS Styling

First I change the background color to black. It's not required but my graphics just looks better on black;)
body {
background-color: #000;
}
Then I use universal selector (*) to remove browser's default values of padding and margin from all elements. I think it just makes life easier. Alternatively, you could place these declarations under the ul selector.
* {
margin: 0;
padding: 0;
}
Now we are going style the ul with CSS. CSS declaration block for ul:
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
The first declaration removes the default HTML list bullets. The second declaration places small (1x80 pixels) image in the background (repeated automatically.) The third declaration sets the height of the list. The fourth declaration sets the width of the list. The fifth declaration is voluntary. Auto margin will center the list within its parent element. Now the list looks like in picture 3.