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”


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





The next picture shows the result:

Using of a structural list as navigation menu

Using of a structural list as navigation menu