How to use lists to make a horizontal menu with CSS

You may need to create a Web site with a horizontal menu close to the top of the document. In this case you can follow the next steps:

1. Prepare a list which you will use as menu. You can use the next test.html file as example.


File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”


<html xmlns=”” lang=”en-US”>


<title>How to use a structural list as a navigation menu with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />



<div id=”navigation”>


<li><a href=”#”>Products and services</a></li>

<li><a href=”#”>Solutions</a></li>

<li><a href=”#”>Downloads</a></li>

<li><a href=”#”>Store</a></li>

<li><a href=”#”>Support</a></li>

<li><a href=”#”>Training</a></li>

<li><a href=”#”>Partners</a></li>

<li><a href=”#”>About</a></li>





2. Style the ID navigation to give some basic font information. In a CSS layout, this ID would probably also contain some properties to determine the navigation’s position on the page.

#navigation {

font-family: Arial, Helvetica, sans-serif;

font-size: .9em;


3. Style the <ul>, by removing the list bullets and default indentation applied to the list by the browser.

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 4px;


4. Set the display property to inline. The property transforms our list from vertical to horizontal.

#navigation li {

display: inline;


5. Style the links for our navigation.

#navigation a:link, #navigation a:visited {

padding: 3px 10px 2px 10px;

color: #FFFFFF;

background-color: #0101DF;

text-decoration: none;

border: 1px solid #0B0B61;


#navigation a:hover {

color: #FFFFFF;

background-color: #0B0B61;


The next picture shows the result:

Using of lists to make a horizontal menu with CSS

Using of lists to make a horizontal menu with CSS