A vertical sliding sub-menu system

A vertical sliding sub-menu system

Information

A totally NEW! idea that works best with 100% high body size (no initial jump). Click the left column to change the right. Pure CSS! (scroll to the bottom of the page before clicking)

The links in the right hand column DO NOT WORK and will take you to an error page. They are added so that you can see the link destination changes on hover.

======================

#info {
  height:27em;
 
  }
#fixed {
  display:block;
  width:100px;
  height:150px;
  float:left;
  }

#submenus {
  display:block;
  float:left;
  width:170px;
  height:150px;
  margin-left:1px;
  overflow: hidden;
}
#fixed ul {
  padding:0;
  margin:0;
  list-style-type:none;
  }
#fixed li {
  display:block;
  width:100px;
  height:20px;
  margin-bottom:1px;
  }
#fixed li a {
  display:block;
  width:95px;
  height:20px;
  background:#808;
  color:#fff;
  font-weight:bold;
  text-align:right;
  text-decoration:none;
  padding-right:5px;
  }
#fixed li a:hover {
  background:#000;
  }
#fixed li a:active {
  background:#00c;
  }

#submenus dl {
  padding:0;
  margin:0;
  height:150px;
  width:150px;
  }
#submenus dt {
  display:block;
  width:145px;
  height:20px;
  background:#808;
  color:#fff;
  margin-bottom:1px;
  color:#fff;
  text-align:left;
  padding-left:5px; 
  font-weight:bold;
  }
#submenus dt a {
  color:#fff;
  }
#submenus dd {
  display:block;
  width:150px;
  height:20px;
  padding:0;
  margin:0 0 1px 0;
  }
#submenus a.sub {
  display:block;
  width:145px;
  height:20px;
  background:#88c;
  color:#fff;
  text-decoration:none;
  padding-left:5px;
  }
#submenus a.sub:hover {
  background:#bbb;
  color:#000;
  }

/* hack for Opera 7+ */
@media all and (min-width: 0px){
#submenus {overflow:auto; margin-top:-3px;}
#submenus dl.first {margin-top:3px;}
}

#content ol {font-size:11px;}