Modern CSS techniques for HTML lists of links - Vertical

Navigational links are mostly placed in HTML lists, below is a collection of CSS techniques for making your navigation bar more stylish. For the sake of illustration, I'll use the HTML example below:

<ul id="navlist">
<li id="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

Emphasized texts are those that deserve extra attention, think about the reason of their presences and the way they are used. All the styles have passed the survival test with Win IE 6.0 and FireFox 1.5, modify and experiment freely!

1. Using images for bullets rather than built-in plain shapes:
   
   #navlist { list-style-image: url(images/arrow.gif); }
   
   wherein images/arrow.gif is the tiny image in place of the default bullets. Better be no more than 6 or 10 pixels by width.
2. Background images for bullets:
   
   #navlist {
   list-style: none;
   }
   
   #navlist li {
   padding-left: 10px;
   background-image: url(images/arrow.gif);
   background-repeat: no-repeat;
   background-position: 0 .5em;
   }
   
   padding-left extends the content of element li left by 10 pixels, clearing space for arrow.gif. Setting background-repeat to "no-repeat" prohibits the arrow.gif from populating the entire li element. A background-position of "0 .5em" prescribes how arrow.gif should be placed in respect to the top and left boundaries of the containing element, li.
3. Separaters:
   
   #navlist {
   padding-left: 0;
   margin-left: 0;
   border-bottom: 2px solid green;
   width: 200px;
   }
   
   #navlist li {
   list-style: none;
   padding: 0.25em;
   border-top: 2px solid green;
   }
   
   #navlist li a {
   text-decoration: none;
   }
   
   Borders do the job.
   
4. Rollover lists:
   
   #navlist {
   width: 200px;
   margin-left: 0;
   padding-left: 0;
   list-style: none;
   font-family: Arial, Helvetica, sans-serif;
   }
   
   #navlist a {
   display: block;
   padding: 3px;
   width: 170px; /* 100% won't work with IE */
   background-color: #036;
   border-bottom: 1px solid white;
   }
   
   #navlist a:link, #navlist a:visited {
   color: white;
   text-decoration: none;
   }
   
   #navlist a:hover {
   background-color: #369;
   color: white;
   }
   
   Displaying elements of a with a designated broad width is the key to achieve rollover effect. More stylish rollover effects can be produced by manipulating those color, background, and border properties of the a, li, and ul elements. Check out this 3D enabled rollover menu for inspiration, http://css.maxdesign.com.au/listamatic/vertical13.htm.
5. Bulletted rollovers:
   
   #navlist {
   list-style: none;
   }
   
   #navlist li a {
   padding: 2px 9px 2px 0;
   margin-left: 20px;
   color: #4169E1;
   text-decoration: none;
   }
   
   #navlist li a:hover {
   color: #6B8E23;
   background: url(/image/isit.gif) no-repeat right;
   }
   
   Check econguru.com for this bulleted rollover, when you hover over the links of home, accessibility, feedback, and contact, a gold question mark emerges to the right of each of them.