Tutorial 2 - Simple CSS rollover lists

Step 9 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

Go to Step 10 →

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

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