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


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 →

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

<div id="navcontainer">
<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>
Other Max Design articles and presentations
Associated with webstandardsgroup.org