Tutorial 2 - Simple CSS rollover lists

Step 10 - Separate the list items

The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".

Finished!

There are many variations that can be applied to this list method. You can play with colors, widths padding and background images to create a wide range of list styles.

Go to Variation - Current page link →

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}


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>
Comments form
Other Max Design articles and presentations
Associated with webstandardsgroup.org