Tutorial 4 - Horizontal lists

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.

Go to Step 9 →

CSS CODE
#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;
}



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