CSS Nested List

Most web sites these days use some type of rollover navigation structure. When the mouse is passed across the link it changes colors. This is usually achieved with a lot of javascript code which clutters your web pages making them slow loading and not very search engine friendly.

A great alternative is to use a css list for the vertical navigation or a css nested list if you require something more complex.
I use the css list if I have a number of categories that need to be divided into subcategories.

Benefits of a CSS Listed List

1. Fast loading

2. Search engine friendly

3. Less code required than javascript rollovers.

4. Easy to implement

5. Easy to modify

Here is the code for a CSS nested list I used for one of my client’s sites.

CSS

.navlist{
margin-left: 0px;
padding-left: 0px;
list-style:none;}
.navlist li
{
padding-left: 5px;
}
.navlist ul {list-style:none;}
ul li {
list-style:circle;
color: #FFFFFF;
font-weight: bold;
}
ul li a{
color: #FFFFFF;
font-weight: bold;
text-decoration:none;
}
ul li a:hover{
text-decoration: underline;
}

XHTML


<ul class="navlist">
  <li class="active"><a href="#" class="current">Home</a></li>
  <li>History
    <ul class="subnavlist">
      <li class="subactive"><a href="#" class="subcurrent">What We Believe</a></li>
      <li><a href="#">Pastors Marc & Nanette</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </li>
  <li>Ministries
    <ul class="subnavlist">
      <li class="subactive"><a href="#">Children's Ministry</a></li>
      <li><a href="#">Men's Ministry</a> </li>
      <li><a href="#">Music Ministry</a></li>
      <li><a href="#">Prison Ministry</a></li>
      <li><a href="#">TV Ministry</a></li>
      <li><a href="#">Women's Ministry</a></li>
      <li><a href="#">Youth Ministry</a></li>
    </ul>
  </li>
  <li><a href="#">Bookstore Online</a></li>
  <li><a href="#">Study Resources</a></li>
  <li><a href="#">Service Information</a></li>
  <li><a href="#">TV Broadcast</a></li>
  <li><a href="#">Donations</a></li>
</ul>


Resources

http://css.maxdesign.com.au/listutorial/sub01.htm
http://css.maxdesign.com.au/listamatic2/
http://codex.wordpress.org/Styling_Lists_with_CSS