How to use a structural list as a navigation menu with CSS

You can use a list to mark up places that users can visit on the site. You have to follow the next steps:

1. Create your list, placing each navigation link inside an <li> tag.

2. Wrap this list in a <div> with an appropriate ID.

3. Style the container in which the navigation sits, in our case, #navigation.

4. Style the list.

5. Style the <li> tags within #navigation, to give them a bottom border.

6. Style the link itself.

File test.css

#navigation {

width: 200px;

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

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #FFFF00;

}

#navigation li a {

display: block;

padding: 5px 5px 5px 0.5em;

border-left: 12px solid #0B0B61;

border-right: 1px solid #0B0B61;

background-color: #0101DF;

color: #FFFFFF;

text-decoration: none;

}

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>

The next picture shows the result:

Using of a structural list as navigation menu

Using of a structural list as navigation menu