Lists as Navigation

Example 10.54

Example 10.54 Source:

<div id="navlhs" >
<ul>
  <li><a href="http://big12sports.collegesports.com/"  shape="rect" >Big XII</a>
    <ul>
      <li><a href="http://www.baylor.edu/"  shape="rect" >Baylor</a></li>
      <li><a href="http://www.cu.edu/"  shape="rect" >Colorado</a></li>
      <li><a href="http://www.iastate.edu/"  shape="rect" >Iowa State</a></li>
      <li><a href="http://www.ku.edu/"  shape="rect" >Kansas</a></li>
      <li><a href="http://www.ksu.edu/"  shape="rect" >Kansas State</a></li>
      <li><a href="http://www.missouri.edu/"  shape="rect" >Missouri</a></li>
      <li><a href="http://www.unl.edu/"  shape="rect" >Nebraska</a></li>
      <li><a href="http://www.ou.edu/"  shape="rect" >Oklahoma</a></li>
      <li><a href="http://www.okstate.edu/"  shape="rect" >Oklahoma State</a></li>
      <li><a href="http://www.utexas.edu/"  shape="rect" >Texas</a></li>
      <li><a href="http://www.tamu.edu/"  shape="rect" >Texas A&M</a></li>
      <li><a href="http://www.ttu.edu/"  shape="rect" >Texas Tech</a></li>
    </ul>
  </li>
  <li><a href="http://www.ivyleaguesports.com/"  shape="rect" >Ivy League</a>
    <ul class="collapse" >
      <li><a href="http://www.brown.edu/"  shape="rect" >Brown</a></li>
      <li><a href="http://www.columbia.edu/"  shape="rect" >Columbia</a></li>
      <li><a href="http://www.cornell.edu/"  shape="rect" >Cornell</a></li>
      <li><a href="http://www.dartmouth.edu/"  shape="rect" >Dartmouth</a></li>
      <li><a href="http://www.harvard.edu/"  shape="rect" >Harvard</a></li>
      <li><a href="http://www.upenn.edu/"  shape="rect" >Penn</a></li>
      <li><a href="http://www.princeton.edu/"  shape="rect" >Princeton</a></li>
      <li><a href="http://www.yale.edu/"  shape="rect" >Yale</a></li>
    </ul>
  </li>
  <li><a href="http://www.pac-10.org/"  shape="rect" >Pac 10</a>
    <ul class="collapse" >
      <li><a href="http://www.arizona.edu/"  shape="rect" >Arizona</a></li>
      <li><a href="http://www.asu.edu/"  shape="rect" >Arizona State</a></li>
      <li><a href="http://www.berkeley.edu/"  shape="rect" >California</a></li>
      <li><a href="http://www.uoregon.edu/"  shape="rect" >Oregon</a></li>
      <li><a href="http://www.oregonstate.edu/"  shape="rect" >Oregon State</a></li>
      <li><a href="http://www.stanford.edu/"  shape="rect" >Stanford</a></li>
      <li><a href="http://www.ucla.edu/"  shape="rect" >UCLA</a></li>
      <li><a href="http://www.usc.edu/"  shape="rect" >USC</a></li>
      <li><a href="http://www.washington.edu/"  shape="rect" >Washington</a></li>
      <li><a href="http://www.wsu.edu/"  shape="rect" >Washington State</a></li>
    </ul>
  </li>
</ul>
</div>

In example54.css

#navlhs {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  width: 10em;
  border-right: 1px solid #333;
  margin-bottom: 1em;
  background-color: #ddd;
  color: #900;
}
#navlhs ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}
#navlhs ul li { 
  margin: 0;
  border-top: 1px none #333;
}
#navlhs ul li a {
  display: block;
  background-color: #ccc;
  border-top: 1px none #333;
  border-right: 1px solid #333;
  border-bottom: thin dotted #333;
  border-left: 5px solid #333;
  text-decoration: none;
  padding: 2px 2px 2px 0.5em;
}
#navlhs a:link {
  color: #900;
}
#navlhs a:visited {
  color: #900;
}
#navlhs a:hover {
  color: #fff;
  background-color: #900;
  border-top: 1px outset #333;
  border-right: 1px outset #333;
  border-bottom: 1px outset #333;
  border-left: 5px outset #333;
}
#navlhs a:active {
  color: #fff;
  background-color: #900;
  border-top: 1px inset #333;
  border-right: 1px inset #333;
  border-bottom: 1px inset #333;
  border-left: 5px inset #333;
}
#navlhs ul ul a { 
  list-style: none;
  padding-left: 1.5em;
  font-size: 80%;
  font-weight: normal;
}
#navlhs ul.collapse { 
  display: none; 
}

In head element:

Example 10.54 Rendered: