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:
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 inpicture 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.
Picture 3. Now the horizontal menu has a background but the list items are still vertically.
LI CSS Styling
Next the menu is made horizontal by floating li elements with CSS:
li {
float: left;
}
Now the list starts to resemble a horizontal menu. At the moment the menu looks like in picture 4.
Picture 4. Work in progress CSS navigation menu.
Styling Links With CSS
Links are styled by making the following declarations to the descendant link (a) selector:
ul a {
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
The first declaration places a small (2x80 pixels) background image to each link. The background image works as a divider between the links (picture 5). The second declaration forbids the repeating of the background image. The third declaration defines the location of the background image. The fourth and fifth declaration create padding around each link. The sixth declaration makes the whole block clickable (instead of just the text) The seventh declaration sets the height of the link. This is needed so that the whole height of the block would be clickable. This also centers the text vertically. The eighth declaration removes the underlining from the links. The 9th - 11th declarations are just for styling the text. Now the menu looks like in picture 6.
Picture 5. Background images used in this horizontal navigation menu. You can download them
here and
here.
Picture 6. Now the CSS styled ul li list looks like a real navigation menu.
Finalizing the Horizontal CSS Menu
The menu is almost complete but if you look closely you'll see one problem with the menu. There is unnecessary divider after the last link. It can be removed by adding style declaration inside of the last link tag. So the final HTML code looks like:
<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 style="background-image: none;" href="#">Contact</a></li>
</ul>
Last thing to do is a small visual enhancement. The following CSS declaration block creates mouse-over color change to the links:
ul a:hover {
color: #FFF;
}
In picture 7 you see the final horizontal CSS menu. The menu is tested with Internet Explorer 7, Firefox 3 and Google Chrome 0.2.149.30.
Picture 7. The complete horizontal menu made with HTML list (ul li) and styled with CSS.
