Tutorial 2 - Simple CSS rollover lists

Step 8 - 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.

Go to Step 9 →

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


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