## Lists as Navigation

Default styling of nested list:

Nested list styled as clamshell 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:
<link rel="stylesheet" type="text/css" href="example54.css"/>
Example 10.54 Rendered:

- With Styles
- Without Styles

Inspired by: CSS Cookbook by Christopher Schmitt