左浮动菜单

<style>
#ProMenu{width:157px;clear:both;float:left; position:fixed; top:20%; left:-1px;}
#ProMenu span{float:left;width:157px;}
#ProMenu a{display:block;width:72px;height:40px;line-height:40px;font-size:13px;border-bottom:3px solid #FFFFFF;margin-left:1px;display:inline;float:left;padding-left:10px; text-decoration:none;background:#b2bdcf;}
#ProMenu a:hover{text-decoration:none; background:#04a1c9; border-bottom:2px solid #FFFFFF}
#ProMenu .drop{position:absolute;width:85px;height:282px;overflow:hidden;float:left;}
#ProMenu .drop a{width:85px;height:25px;line-height:30px;text-align:center;margin:2px;margin-top:-1px;padding-left:0;}
</style>


<div id="ProMenu">
   
    <li style="list-style-type:none;">
 <a href="#gotop" title="返回顶部"><img src="/style/images/home_top.png" width="44" height="18" alt="top"/></a>
     <span>
      <a href="" id="DropBM1" οnmοuseοver="Play2(1)" οnmοuseοut="Play2(0)">幼教事业部</a>
      <span id="DropM1" class="drop" οnmοuseοver="Play2(1)" οnmοuseοut="Play2(0)">
       <a href="#">长沙玫瑰园</a>
  <a href="#">长沙凯乐园</a>
  <a href="#">邵东金辉园</a>
  <a href="#">邵东丽景园</a>
  <a href="#">邵东工会园</a>
  <a href="#">邵东廉桥园</a>
  <a href="#">邵东火厂坪园</a>
  <a href="#">北京燕郊园</a>
  <a href="#">邵东商贸园</a>
  <a href="#">邵东佘田桥园</a>
 
      </span>
     </span>
     <span>
      <a href="" id="DropBM2" οnmοuseοver="Play2(2)" οnmοuseοut="Play2(0)">早教事业部</a>
      <!--<span id="DropM2" class="drop" οnmοuseοver="Play2(2)" οnmοuseοut="Play2(0)">
       <a href="class">。。。</a>
      </span>-->
     </span>
     <span>
      <a href="" id="DropBM3" οnmοuseοver="Play2(3)" οnmοuseοut="Play2(0)">托教事业部</a>
     <!-- <span id="DropM3" class="drop" οnmοuseοver="Play2(3)" οnmοuseοut="Play2(0)">
       <a href="class">贝帝托教</a>
      </span>-->
     </span>
 <span>
      <a href="" id="DropBM4" οnmοuseοver="Play2(4)" οnmοuseοut="Play2(0)">培训中心</a>
    <!--  <span id="DropM4" class="drop" οnmοuseοver="Play2(4)" οnmοuseοut="Play2(0)">
       <a href="class">。。。</a>
      </span>-->
     </span>
    <a href="#gobot" title="返回底部" style="margin-bottom:0px;"><img src="/style/images/home_down.png" width="44" height="18" alt="down" /></a>
     <script>
// JavaScript Document
/*
*
*滑门效果类
*2009-3-1
*/
function Qlide()
{
 this.DivId="";
 this.DivCount=0;
 this.DivNum=1;
 //参数设置init(divid,divcount,num) =>[DIV名称的前面部如：div1,div2取div为divid,显则无效!][DIV总数][默认显示第num个DIV/可为空]
 this.init=function(divid,divcount,num)
 {
   this.DivId=divid;
   this.DivCount=(isNaN(divcount))?0:divcount;
   if(num!="")
   {
    this.DivNum=(isNaN(num))?0:num;
   }
   this.play(num);
 }
 //进行
 this.play=function(num)
 {
   for(var i=1;i<=this.DivCount;i++){
    if(document.getElementById(this.DivId+String(i))!=null){
     if(num==i)
     document.getElementById(this.DivId+String(i)).style.display="";
     else
     document.getElementById(this.DivId+String(i)).style.display="none";
    }
   }
 } 
}
      var d2=new Qlide();
      d2.init("DropM",10,0);
      var b;
      function Play2(id)
      {
       if(id!=0)
       {
        document.getElementById("DropBM"+id).style.background="#04a1c9 ";
        b=id;
       }
       else
       { 
        
        document.getElementById("DropBM"+b).style.background="#b2bdcf ";
       }
       d2.play(id);
      }
    </script>
    </li>
   </div>
   <div class="bottom">
   </div>

  </div>

样式图片如下：