CSS Navigation Bar
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
- and
elements makes perfect sense:
Example
Now let’s remove the bullets and the margins and padding from the list:
Example
- list-style-type: none; — Removes the bullets. A navigation bar does not need list markers
- Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
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:
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 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;)
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.
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 (1×80 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:
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 (2×80 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:
Last thing to do is a small visual enhancement. The following CSS declaration block creates mouse-over color change to the links:
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.