http://css.maxdesign.com.au/listutorial/horizontal_master.htm
Tutorial 4 – Horizontal lists – all steps combined
There are many methods that can be used to making a horizontal list. The main ingredient is "display: inline", applied to the "LI" element.
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>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
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 written 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
Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
Step 4 – Display inline
To force the list into one line, apply "display: inline;" to the "LI".
CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
Step 5 – Removing text decoration
At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }
Step 6 – Padding around list items
To make each list item into a box, we need to add padding to the "a" element.
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
Step 7 – Adding background color
At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
Step 8 – Add a rollover color
Use "a:hover" to set a second background color, as a rollover. Roll over the list now you will see how it works.
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#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;
}
Step 9 – Center the list
#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;
}