Tutorial 4 - Horizontal lists

Step 5 - Removing text decoration

At this point you may wish to remove the text underline. It is a common practice 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 6 →

#navcontainer ul
margin: 0;
padding: 0;
list-style-type: none;

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }

<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