Skip to full example.

Basic Idea

The basic idea is to only use the unordered list to control the position of the links and use the link box for all the link styles.

Starting with this code and style:

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
li {
  display: inline;
}
ul a {
  display: block;
}

This clears the default styles and bullets on the list and makes the links display as a block so they span the width of the list. The display inline on the <li> is for IE 6.

Example:

Link Styles

Now the link styles can be added to the link box. For instance a background image can be used to add an arrow in front of each link. Hovers can be created with text color, background color, borders and background image changes.

ul a {
  display: block;
  background-image: url(arrow-white-medium.gif);
  background-repeat: no-repeat;
  background-position: 7px 7px;
  color: #FFFFFF;
  background-color: #216AAF;
  padding-top: 3px;
  padding-right: 15px;
  padding-left: 20px;
  padding-bottom: 3px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #3276B5;
  font-family: "Trebuchet MS", Arial, Helvetica;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}
ul a:hover {
  text-decoration: none;
  background-color: #0E5CA6;
}

The padding on the link box is used to create the space for the arrow image.

Example:

Expanding Lists

For expanding navigation indent the list for each level of the navigation. Then a different style can be applied to each level.

<ul>
  <li><a href="#">Link</a>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

ul ul a {
  background-image: none;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
}
ul ul a:hover {
  background-color: #0E5CA6;
}

These styles modify the first indented list.

Example:

On states

A current style can be added to any <li> to indicate a link as on.

<ul>
  <li class="current"><a href="#">Link</a>
    <ul>
      <li class="current"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

ul .current a {
  color: #FCED69;
  background-image: url(arrow-yellow-medium.gif);
}
ul .current ul a {
  color: #FFFFFF;
  background-image: none;
}
ul ul .current a {
  color: #FCED69;
}

This adds the on style to the current links and fixes the styles for any indented links under the current style.

Example:

Leftnav Style

Placing the list inside a leftnav box, background images can be added to the top and bottom of the navigation. Then the <ul> can be used to add the top border to the first link.

<div class="leftnav">
  <ul>
    <li class="current"><a href="#">Link</a>
      <ul>
        <li class="current"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

.leftnav {
  width: 150px;
  background-color: #216AAF;
  padding-top: 10px;
  background-image: url(leftnav-top-round.jpg);
  background-repeat: no-repeat;
}
.leftnav ul {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #347CBE;
  background-image: url(leftnav-bottom-round.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 10px;
}
.leftnav ul ul {
  border-top-style: none;
  padding-bottom: 0px;
}

A style needs to be added for the indented list to fix the border and padding.

Example:

Full Example

Full example with all styles.

<div class="leftnav">
  <ul>
    <li class="current"><a href="#">Link</a>
      <ul>
        <li class="current"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

.leftnav {
  width: 150px;
  background-color: #216AAF;
  padding-top: 10px;
  background-image: url(leftnav-top-round.jpg);
  background-repeat: no-repeat;
}
.leftnav ul {
  margin: 0px;
  list-style-type: none;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #347CBE;
  background-image: url(leftnav-bottom-round.jpg);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}
.leftnav li {
  display: inline;
}
.leftnav ul a {
  display: block;
  background-image: url(arrow-white-medium.gif);
  background-repeat: no-repeat;
  background-position: 7px 7px;
  padding-left: 20px;
  color: #FFFFFF;
  background-color: #216AAF;
  padding-top: 3px;
  padding-right: 15px;
  padding-bottom: 3px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #347CBE;
  font-family: "Trebuchet MS", Arial, Helvetica;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}
.leftnav ul a:hover {
  text-decoration: none;
  background-color: #0E5CA6;
}
.leftnav ul .current a {
  color: #FCED69;
  background-image: url(arrow-yellow-medium.gif);
}
.leftnav ul .current ul a {
  color: #FFFFFF;
  background-image: none;
}
.leftnav ul ul {
  border-top-style: none;
  padding-bottom: 0px;
}
.leftnav ul ul a {
  background-image: none;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
}
.leftnav ul ul a:hover {
  background-color: #0E5CA6;
}
.leftnav ul ul .current a {
  color: #FCED69;
}

Full Example: