Tutorial 4 - Horizontal lists - all steps combined

There are many methods that can be used to making a horizontal list. The main in
gredient is "display: inline", applied to the "LI" element.
Milk Eggs Cheese Vegetables Fruit
CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
Step 1 - Make a basic list
Start with a basic unordered list. The list items are all active (wrapped in <a
href="#"> </a>) which is essential for this list to work. Some CSS rules are wri
tten exclusively for the "a" element within the list items. For this example a "
#" is used as a dummy link.
Step 2 - Remove the bullets
To remove the HTML list bullets, set the "list-style-type" to "none".
#navcontainer ul { list-style-type: none; }
Step 3 - Remove padding and margins