简易三级下拉菜单

<style type="text/css">
*{margin:0;padding:0;}
#box{width:600px;height:23px;background:#ccc;margin:0 auto;padding-top:27px;}
#banner{width:550px;height:23px;position:relative;}
#banner ul{list-style:none;}
#banner ul li{float:left;}
#banner ul li a{width:100px;height:23px;background:#000;color:#fff;font-size:12px;
                line-height:23px;text-align:center;margin-left:5px;display:block;text-decoration:none;}
#banner ul li a:hover{background:red;}
#company{position:absolute;left:110px;top:23px;width:80px;}
#company ul{list-style:none;}
#company ul li{float:none;display:inline}
#company ul li a{background:#000;color:#fff;margin:0;width:100px;height:23px;}

#company2{width:100px;height:23px;position:absolute;top:30px; left:100px;display:none;}
#company2 ul li{float:none;width:100px;height:23px; display:inline}
#company2 ul li a{ margin:0;}
</style>

<div id="box">
 <div id="banner">
  <ul>
   <li><a href="#">公司历程</a></li>
   <li><a href="#" onmouseover="over()" onmouseout="out()">公司简介</a></li>
   <div id="company" style="display:none;" onmousemove="over()" onmouseout="out()" >
    <ul>
     <li><a href="#">公司总裁</a></li>
     <li><a href="#" onmouseover="over2()" onmouseout="out2()">公司企划</a></li>
     <div id="company2" onmouseover="over2()" onmouseout="out2()">
      <ul>
       <li><a href="#">总裁致辞</a></li>
       <li><a href="#">公司来历</a></li>
       <li><a href="#">总裁方案</a></li>
      </ul>
     </div>
     
     <li><a href="#">公司流程</a></li>
    </ul>
   </div>
   <li><a href="#">品牌介绍</a></li>
   <li><a href="#">联系我们</a></li>
  </ul>
 </div>
</div>
<script language="javascript">
function over()
{
 document.getElementById("company").style.display=""
}

function out()
{
 document.getElementById("company").style.display="none"
}

function over2()
{
 document.getElementById("company2").style.display="block"
}
function out2()
{
 document.getElementById("company2").style.display="none"
}
</script>