Floating inline list items

This is tutorial tells how to float a simple list, converting it into a horizontal navigation bar. How to make a horizontal navigation bar using css float.
Using this tutorial you can easily make a horizontal floating navigation bar using list for your website that floats on top or bottom of your web page.


CSS CODE
ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}

ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

HTML CODE
<ul id="navlist">
<li><a href="http://www2.blogger.com/post-edit.g?blogID=1991891025713771863&postID=4885604026708059279#">Item one</a></li>
<li><a href="http://www2.blogger.com/post-edit.g?blogID=1991891025713771863&postID=4885604026708059279#">Item two</a></li>
<li><a href="http://www2.blogger.com/post-edit.g?blogID=1991891025713771863&postID=4885604026708059279#">Item three</a></li>
</ul>
</code>