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”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<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” />

</head>

<body>

<div id=”navigation”>

<ul>

<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>

</ul>

</div>

</body>

</html>

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