JS三级下拉(静态)

页面代码：

<SCRIPT language=JavaScript src="menu.js"></SCRIPT>
<SCRIPT language=JavaScript src="main.js"></SCRIPT>
<SCRIPT language=JavaScript>
function subscribe(product) {
 window.open ('/function/subscribe.asp?sort=idcard&pro='+product,'产品预订','height=420,width=380');
}
</SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css">
<table width="780" align="center" cellpadding="0" class="menu" id="menu" >
  <tr>
    <td align="center"><a href="/">公司首页</a><a href="/product/idcard.asp?sort=idcard">证卡首页</a>
 
 <a href="/?sort=idcard" οnmοuseοver="movese('证卡类解决方案∝/?sort=idcard|条码产品解决方案∝/product/project/?sort=idcard&id=20|超大卡高清晰防伪证卡解决方案∝/product/project/?sort=idcard&id=7|中型卡高清晰双面打印证卡解决方案∝/product/project/?sort=idcard&id=6|标准卡高清晰双面打印证卡解决方案∝/product/project/?sort=idcard&id=5|标准卡双面打印证卡解决方案∝/product/project/?sort=idcard&id=4|标准卡单面打印证卡解决方案∝/product/project/?sort=idcard&id=3|企业、校园“一卡通”证卡解决方案∝/product/project/?sort=idcard&id=2|电信个性电话卡解决方案∝/product/project/?sort=idcard&id=1')">证卡解决方案</a>
<a href="/product/listing.asp?sort=idcard" οnmοuseοver="movese('选购指南　　　∝/product/listing.asp?sort=idcard|直印式证卡打印机∝/product/listing.asp?sort=idcard&sortid=8**证卡解决方案1∝/product/brochure/?sort=idcard&id=84**P310i∝/product/brochure/?sort=idcard&id=112**P720∝/product/brochure/?sort=idcard&id=34**P520∝/product/brochure/?sort=idcard&id=35**P420∝/product/brochure/?sort=idcard&id=36**P310∝/product/brochure/?sort=idcard&id=37**P330i∝/product/brochure/?sort=idcard&id=38**P640i∝/product/brochure/?sort=idcard&id=110**P120i∝/product/brochure/?sort=idcard&id=82**P110i∝/product/brochure/?sort=idcard&id=72**Tango2e∝/product/brochure/?sort=idcard&id=74**Rio2e∝/product/brochure/?sort=idcard&id=80**Enduro∝/product/brochure/?sort=idcard&id=137**Tango+L∝/product/brochure/?sort=idcard&id=81**Avalon∝/product/brochure/?sort=idcard&id=79**AvalonDuo∝/product/brochure/?sort=idcard&id=76**Tempo∝/product/brochure/?sort=idcard&id=75**640AmphiII∝/product/brochure/?sort=idcard&id=125**CS320∝/product/brochure/?sort=idcard&id=127**CS310∝/product/brochure/?sort=idcard&id=128**CS300∝/product/brochure/?sort=idcard&id=55**640Amphi∝/product/brochure/?sort=idcard&id=50**CS311∝/product/brochure/?sort=idcard&id=133**DTC515-525∝/product/brochure/?sort=idcard&id=44**C30∝/product/brochure/?sort=idcard&id=73**DTC550-DTC550LC∝/product/brochure/?sort=idcard&id=71**DTC400∝/product/brochure/?sort=idcard&id=47**DTC300∝/product/brochure/?sort=idcard&id=48**Peb3le∝/product/brochure/?sort=idcard&id=57**Quantum∝/product/brochure/?sort=idcard&id=58**dualys∝/product/brochure/?sort=idcard&id=59**NewPebble∝/product/brochure/?sort=idcard&id=60**SP75plus∝/product/brochure/?sort=idcard&id=68**SP35plus∝/product/brochure/?sort=idcard&id=40**CP60∝/product/brochure/?sort=idcard&id=117**CP80∝/product/brochure/?sort=idcard&id=116**CP40∝/product/brochure/?sort=idcard&id=115**SP55plus∝/product/brochure/?sort=idcard&id=39|再转印高清晰证卡打印机∝/product/listing.asp?sort=idcard&sortid=7**FA680∝/product/brochure/?sort=idcard&id=66**CX320∝/product/brochure/?sort=idcard&id=56**CX330∝/product/brochure/?sort=idcard&id=135**FA690∝/product/brochure/?sort=idcard&id=132**HDP5000∝/product/brochure/?sort=idcard&id=78**HDP600CR100∝/product/brochure/?sort=idcard&id=67**HDP600∝/product/brochure/?sort=idcard&id=43')">证卡打印机</a>
<a href="/product/material/?sort=idcard" οnmοuseοver="movese('智能卡种类　 ∝/product/material/card/?sort=idcard**ID 卡∝/product/support/article/?sort=idcard&id=21**接触式IC卡∝/product/support/article/?sort=idcard&id=22**非接触式IC卡∝/product/support/article/?sort=idcard&id=23**双界面卡∝/product/support/article/?sort=idcard&id=24**组合卡∝/product/support/article/?sort=idcard&id=25|清洁套件∝/product/support/article/?sort=idcard&id=26**使用说明∝/product/support/article/?sort=idcard&id=26|色带∝/product/material/?sort=idcard**MAGICARD∝/product/material/listing.asp?sort=idcard&stype=色带&factory=MAGICARD**HiTi∝/product/material/listing.asp?sort=idcard&stype=色带&factory=HiTi**EVOLIS∝/product/material/listing.asp?sort=idcard&stype=色带&factory=EVOLIS**IST∝/product/material/listing.asp?sort=idcard&stype=色带&factory=IST**Datacard∝/product/material/listing.asp?sort=idcard&stype=色带&factory=Datacard**Zebra∝/product/material/listing.asp?sort=idcard&stype=色带&factory=Zebra**FARGO∝/product/material/listing.asp?sort=idcard&stype=色带&factory=FARGO|打印头∝/product/material/?sort=idcard**EVOLIS∝/product/material/listing.asp?sort=idcard&stype=打印头&factory=EVOLIS**IST∝/product/material/listing.asp?sort=idcard&stype=打印头&factory=IST**Datacard∝/product/material/listing.asp?sort=idcard&stype=打印头&factory=Datacard**Zebra∝/product/material/listing.asp?sort=idcard&stype=打印头&factory=Zebra**FARGO∝/product/material/listing.asp?sort=idcard&stype=打印头&factory=FARGO')">证卡耗材</a>
<a href="/product/idcard/software/?sort=idcard" οnmοuseοver="movese('证卡制作系统∝/product/idcard/software/?sort=idcard|Cardfive 6.4∝/product/idcard/software/Cardfive 6.4.asp')">业务及方案</a>
<a href="/product/idcard/cardshow/?sort=idcard" οnmοuseοver="movese('精品套卡欣赏∝/product/idcard/cardshow/?sort=idcard**FARGO样卡∝/product/idcard/cardshow/cardshow.asp?id=1&name=FARGO样卡**会员卡∝/product/idcard/cardshow/cardshow.asp?id=11&name=会员卡**学生证∝/product/idcard/cardshow/cardshow.asp?id=10&name=学生证**工作证∝/product/idcard/cardshow/cardshow.asp?id=2&name=工作证**出入证∝/product/idcard/cardshow/cardshow.asp?id=12&name=出入证')">样卡欣赏</a>

<a href="/tech/index1.asp" οnmοuseοver="movese('维修服务∝/service.asp|常见问题∝/product/support/article/?sort=idcard|技术文章∝/product/support/article/?sort=idcard&sortid=技术文章|下载中心∝/product/support/download/?sort=idcard**驱动程序∝/product/support/download/?sort=idcard&stype=driver**电子彩页∝/product/support/download/?sort=idcard&stype=brochure**帮助演示∝/product/support/download/?sort=idcard&stype=help**应用软件∝/product/support/download/?sort=idcard&stype=software|问题提交∝/product/support/?sort=idcard**问题查看∝/product/support/view.asp?sort=idcard')">技术支持</a><a href="/fagoo/" οnmοuseοver="movese('公司新闻　　　 ∝/fagoo/news/|网站地图∝/fagoo/webmap.asp|联系我们∝/fagoo/address.asp')">公司信息</a></td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" οnclick=click1() οnmοuseοver="clearTimeout(cleartime)" οnmοuseοut="temp1='none';cleartime=setTimeout('menudiv.style.display=temp1;menudiv2.style.display=temp1',500)" class="menuitem" id=menudiv style='display:none'>
<tr><Td></td></tr>
</table>
<table width="120" cellpadding="0" cellspacing="0" οnclick=click1() οnmοuseοver="clearTimeout(cleartime)" οnmοuseοut="temp1='none';cleartime=setTimeout('menudiv.style.display=temp1;menudiv2.style.display=temp1',500)" class="menuitem" id=menudiv2 style='display:none'>
<tr><Td></td></tr>
</table>

js代码：

var cleartime=1
function movese(menuStr){   //添加一级菜单的函数
  var menudiv=document.getElementById("menudiv");
  menudiv.style.display='';menudiv2.style.display='none';if(cleartime!=1)clearTimeout(cleartime)
  menudiv.style.posLeft=menu.offsetLeft+event.srcElement.offsetLeft+2;
  menudiv.style.posTop=menu.offsetTop+menu.offsetHeight
  for(i=0;menudiv.rows.length;i++)menudiv.deleteRow()    //清除一级菜单中所有单元格
  menu1=menuStr.split('|');
  for(i=0;i<menu1.length;i++){        //循环给一级菜单添加单元格
    var tdstr=menudiv.insertRow().insertCell();
    if(menu1[i].indexOf('**')!=-1){          //如果数据可构成二级菜单则。。。
      menu2=menu1[i].split('**');
      menuItem=menu2[0].split('∝');
      tdstr.innerHTML="<a href='"+menuItem[1]+"' οnmοuseοver=movese2('"+menu1[i].replace(/ /g,"&nbsp;")+"')><font face='Webdings' style='font-size: 6pt'>4</font>&nbsp;"+menuItem[0]+"&nbsp;</a>"   //由于字符中有与HTML冲突的字符因而替换
    }else{       //如果数据不可构成二级菜单则。。。
      menuItem=menu1[i].split('∝');
      if(menuItem[1]!="-"){tdstr.innerHTML="<a href='"+menuItem[1]+"'>&nbsp;"+menuItem[0]+"&nbsp;</a>";}else{tdstr.innerHTML="<hr size=1 color=#8BB4D9>";}
    }
  }
  cleartime=setTimeout('menudiv.style.display="none";menudiv2.style.display="none"',2000)    //0.5秒后关闭所有菜单
}

function movese2(menu2){   //添加二级菜单的函数
  var menudiv2=document.getElementById("menudiv2");
  menudiv2.style.display='';if(cleartime!=1)clearTimeout(cleartime)
  menudiv2.style.posLeft=menudiv.offsetLeft+menudiv.offsetWidth-3;
  temptop1=event.srcElement.parentElement.parentElement
  menudiv2.style.posTop=menudiv.offsetTop+(temptop1.offsetHeight*temptop1.rowIndex)-3;    //二级菜单定位
  for(i=0;menudiv2.rows.length;i++)menudiv2.deleteRow()
  menu2=menu2.split('**');
  for(i=1;i<menu2.length;i++){
    var tdstr=menudiv2.insertRow().insertCell();
    var menuItem=menu2[i].split('∝');
    tdstr.innerHTML="<a href='"+menuItem[1]+"'>&nbsp;"+menuItem[0]+"&nbsp;</a>"
  }
  cleartime=setTimeout('menudiv.style.display="none";menudiv2.style.display="none"',500)    //0.5秒后关闭所有菜单
}
function click1(){        //菜单内单元格单击事件
  if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags('A')(0).href
}
function document.onclick(){      //页面单击关闭所有菜单
  menudiv.style.display='none';menudiv2.style.display='none'
}
function window.onerror(){
  return true                   //以外扩展以外错误取消
}

CSS代码：

body {
 margin: 0px;
 padding: 0px;
 color: #000000;
}
table,tr,td {
 font-family: "宋体";
 font-size: 12px;
}
a {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
.menu {
 background-image: url(../image/header/top.jpg);
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000000;
 background-repeat: repeat;
}
.menu a {
 color: #000;
}
#menu a {
 width: 82px;
 text-align: center;
 border-left: 1px solid #000000;
}
#menu a:hover {
 background: #7DD;
 text-decoration: none;
}
.menuitem {
 BACKGROUND-COLOR: #2ABBBA;
 border: 1px solid #000000;
 border-top-style: none;
 position: absolute;
}
.menuitem a {
 font-size: 12px;
 width: 100%;
 DISPLAY: block;
 color: #000;
 line-height: 15px;
 border-top: 1px solid #555;
 text-indent: 3px;
}
.menuitem a:hover {
 color: #FFF;
 background: #06F;
 text-decoration: none;
}
.project {
 background-image: url(../image/header/idcard_home.jpg);
}
.project1 {
 background-image: url(../image/header/topbarcode2.jpg);
}
.border {
 border: 1px solid #D9D9D9;
}
.bigborder {
 border: 1px solid #D9D9D9;
}
.bigborder .border {
 border: none;
}