Tutorial 2 - Simple CSS rollover lists

Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

  1. add id="active" to the "LI" element associated with the current page
  2. duplicate the main rollover list rule set - "#navcontainer a"
  3. replace "#navcontainer" with "#active"
  4. change the background color

Go to Adding borders →

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

#navcontainer li { margin: 0 0 .2em 0; }
#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;
}

#active a
{
display: block;
color: #FFF;
background-color: #600;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li id="active"><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