模似windows XP 左側的菜單效果

 
<style type="text/css">
 
.mainDiv
{
  width:160px;
}
.topItem
{
  width:160px;
  height:22px;
  cursor:pointer;
  background: #467BF2;
  text-decoration: none;
  color: white;
  font-weight:bold;
  font-family:"GOTHIC";
 
}
.dropMenu
{
  background:#D9D9D9;
  border-top:1px solid #467BF2;
  border-left:1px solid #92B1F8;
  border-right:1px solid #92B1F8;
  border-bottom:1px solid #92B1F8;
}
.subMenu
{
     display:none;
}
.subItem
{
     padding-left:5px;
     cursor:pointer;
     font-weight:bold;
     text-decoration:none;
     color:black;
}
.subItem a
{
     text-decoration:none;
     color:black;
}
.subItemOver
{
     cursor:pointer;
     color:blue;
     text-decoration:underline;
     font-weight:bold;
     padding-left:5px;
}
.subItemOver  a
{
     color:blue;
}
.drop
{
     border-left:1px solid black;
     border-right:1px solid black; 
}
</style>
<script language="javascript">
//more javascript from http://www.smallrain.net
var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;