CSS Tips

Lists: not only for Vertical Navigation...but also for Horizontal Navigation

As most of you know, a navigation menu is structurally a list and should be marked up as such. You can also use a list for horizontal navigation by displaying it inline.

For a basic horizontal list use display: inline; and list-style-type: none;. Use background color on the a element to achieve colored blocks and a different background color on the a:hover to for the rollover effect. To see an example of this in action visit:

Markup

<div id="globalnav">
<ul>
<li><a href="configure.html">Configure</a></li>
<li><a href="categories.html">Categories</a></li>
<li><a href="attendance.html">Attendance</a></li>
<li><a href="assignments.html">Assignments</a></li>
<li><a href="scores.html">Scores</a></li>
<li><a href="index_help.html">Index</a></li>
</ul>
</div>

CSS:

#globalnav li {
font-family : Arial, Helvetica, sans-serif;
list-style : none;
display : inline;
line-height : 2.25em;
font-size : 0.9em;
}
#globalnav li a {
padding : 0.25em 0.5em 0.25em 0.75em;
background-color : #eee;
color : #000;
text-decoration : none;
}
#globalnav li a:link {
color : #000000;
background-color : #eee;
border : 1px solid #999;
}
#globalnav li a:visited {
border : 1px solid #999;
}
#globalnav li a:hover {
color : #fff;
background : #332;
}

For more info visit:

<< previous | next >>