Modern CSS techniques for HTML lists of links - Horizontal

With

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

, you can easily build

1. A horizontal link list by employing:
   
   #navlist li {
   display: inline;
   list-style-type: none;
   padding-right: 20px;
   }
   
   
2. Rollover of horizontal lists is also possible:
   
   #navlist {
   padding-left: 0;
   margin-left: 0;
   background-color: green;
   float: left;
   width: 100%;
   }
   
   #navlist li { display: inline; }
   
   #navlist li a {
   padding: .1em 1.3em;
   background-color: green;
   color: white;
   text-decoration: none;
   float: left;
   border-right: 1px solid White;
   }
   
   #navlist li a:hover {
   background-color: yellow;
   color: black;
   }
   
   
3. Tabbed navigation bar can be built through:
   
   #navlist {
   padding: 3px 0;
   margin-left: 0;
   border-bottom: 1px solid black;
   }
   
   #navlist li {
   list-style: none;
   margin: 0;
   display: inline;
   }
   
   #navlist li a {
   padding: 3px 1em;
   margin-left: 3px;
   border: 1px solid black;
   border-bottom: none;
   background: #DDD;
   text-decoration: none;
   }
   
   #navlist li a:hover {
   color: black;
   background: orange;
   }
   
   #navlist li#active a {
   background: white;
   border-bottom: 2px solid white;
   }
   
   
4. Wordpress.org top horizontal navigation bar emulation:
   
   #navlist {
   margin: 0;
   padding: 0 0 20px 10px;
   border-bottom: 1px solid #000;
   }
   
   #navlist ul, #navlist li {
   margin: 0;
   padding: 0;
   display: inline;
   list-style-type: none;
   }
   
   #navlist a:link, #navlist a:visited {
   float: left;
   line-height: 16px;
   font-weight: bold;
   margin: 0 10px 4px 10px;
   text-decoration: none;
   color: #192A72;
   }
   
   #navlist li#active a:link, #navlist li#active a:visited, #navlist a:hover {
   border-bottom: 5px solid black;
   padding-bottom: 2px;
   }
   
   #navlist a:hover {
   border-bottom-color: #BBB;
   color: #345BFE;
   }
   

And that's all for simple lists of links. If you are looking for nested list structures, give Listamatic2 a go. Or, if you are tired of writing CSS yourself, List-O-Matic will generate the styles for you upon your choice. It provides dozens of popular list styles, including both verticals and horizontals. Enjoy!