简易三级下拉菜单

<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="#" οnmοuseοver="over()" οnmοuseοut="out()">公司简介</a></li>
   <div id="company" style="display:none;" οnmοusemοve="over()" οnmοuseοut="out()" >
    <ul>
     <li><a href="#">公司总裁</a></li>
     <li><a href="#" οnmοuseοver="over2()" οnmοuseοut="out2()">公司企划</a></li>
     <div id="company2" οnmοuseοver="over2()" οnmοuseοut="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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值