一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习
运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Div+CSS+JS树型菜单，可刷新</title> <meta name="description" content="http://www.livepo.com"> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type: none; text-align:left; /*定义整个ul菜单的行高和背景色*/ } /*==================一级目录===================*/ #nav a { width: 160px; display: block; padding-left:20px; /*Width(一定要)，否则下面的Li会变形*/ } #nav li { background:#CCC; /*一级目录的背景色*/ border-bottom:#FFF 1px solid; /*下面的一条白边*/ float:left; /*float：left,本不应该设置，但由于在Firefox不能正常显示 继承Nav的width,限制宽度，li自动向下延伸*/ } #nav li a:hover{ background:#CC0000; /*一级目录onMouseOver显示的背景色*/ } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /*==================二级目录===================*/ #nav li ul { list-style:none; text-align:left; } #nav li ul li{ background: #EBEBEB; /*二级目录的背景色*/ } #nav li ul a{ padding-left:20px; width:160px; /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/ } /*下面是二级目录的链接样式*/ #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3; text-decoration:none; font-weight:normal; background:#CC0000; /* 二级onmouseover的字体颜色、背景色*/ } /*==============================*/ #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> #PARENT{ width:300px; padding-left:20px; } </style> </head> <body> <div id="PARENT"> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a> <ul id="ChildMenu2" class="collapsed"> <a href="http://www.netany.net" target="_blank">支付</a></li> <li><a href="#">网上支付</a></li> <li><a href="#">登记汇款</a></li> <li><a href="#">在线招领</a></li> <li><a href="#">历史帐务</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登录</a></li> <a href="http://www.netany.net" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">登录</a></li> <a href="http://www.netany.net" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> </ul> </div> <div style="width:300;padding-left:30px;"> </br></br> 工作需要搞了一个菜单，分享给大家，大家一齐学习 </br></br> <p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p> </div> </body> </html> <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的，菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); --></script> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
xp风格菜单
运行代码框<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> body { } body.menu { background:#383757; margin:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; } table.menu { border:0px; font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; } td.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; } img.menu { vertical-align:bottom; border:0px; } a.menu { font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt; color:#215DC6; text-decoration:none; } a:hover.menu { font-size:8pt;color:#428EFF;font-family:"Arial", "Helvetica", "sans-serif"; } .sec_menu { border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; overflow:hidden; background:#f8f8f8; } .menu_title {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt } .menu_title span { position:relative; top:2px; left:8px; color:#494949; font-weight:bold;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt} .menu_title2 {font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt } .menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; cursor:hand;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt} a:link { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; } a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; text-decoration: none; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; text-decoration: none; } </style> <!--Start XP Style Menu--> <SCRIPT LANGUAGE="Javascript" DEFER="TRUE"> <!-- var menuinit=new Array(50),vers;//(don't change this) for(i=0;i<51;i++)menuinit[i]=new Array(3);//(don't change this) var bgimages_show = "http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"; var bgimages_hide = "http://www.sosaw.com/UploadFile/2005-12/20051228141311995.gif"; var onemenu = 0; //open one menu at same time.1 is yes, 0 is no. default=1. var speedmout = 100; //menu show speed(1~100;default=50) *the large the fast, but also come with more bump. var speedmin = 100; //menu hide speed(1~100;default=50) var developversion = true; //when false block all script error if any. //setting of which menu should be showen. In this example you have 4 menu, which you can switch between "show" and "not show" //if you want to add extra one, you should follow this order: "menuinit[n][1]=;" (in [a][b], b must be '1', a is the serial number of menu) menuinit[1][1]="show"; menuinit[2][1]="not show"; menuinit[3][1]="not show"; ////////////////////////!!!DO NOT CHANGE BELOW THIS LINE!!!!///////////////////////////// // var da=new Date(); var browser=new BrowserDetectLite(); var fstrun=1; var op=""; var whichContinue=""; var whichOpen=""; var opp=0; var opd=0; var opc=0; var sc=1;sd=1; var mnunum=0; var cacheObj,cacheMaxh,cacheObj2; //---------------------------------------------------------------------------------------- function menuShow(obj,maxh,obj2) { var da=new Date(); if(fstrun==1){ op="show"; mountmfunc(0,0,0); obj2.background=bgimages_hide; obj.style.pixelHeight=2; obj.style.display='block'; opc=6.18*(speedmout*0.01); //step length opp=Math.round(opc); //rounded step length opd=(maxh/opp)/100; //times sc=1;sd=opd; fstrun=0; cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2; }else{ if(op!="show") return false; } if(obj.style.pixelHeight<maxh-opp) { if(opd>1){//for slow speed if(sd-sc<1){obj.filters.alpha.opacity+=1;sd+=opd;} sc++; }else{//for fast speed obj.filters.alpha.opacity+=Math.ceil(1/opd); } obj.style.pixelHeight+=opp; cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2; setTimeout('menuShow(cacheObj,cacheMaxh,cacheObj2)','5'); }else{ obj.style.pixelHeight=maxh; obj.filters.alpha.opacity=100; fstrun=1; op=""; sc=1;sd=1; mountmfunc(1,1,1); return true; } } //---------------------------------------------------------------------------------------- function menuHide(obj,maxh,obj2) { da=new Date(); if(fstrun==1){ op="hide"; mountmfunc(0,0,0); obj2.background=bgimages_show; opc=6.18*(speedmout*0.01); //step length opp=Math.round(opc); opd=((maxh-3)/opp)/100; sc=1;sd=opd; fstrun=0; cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2; }else{ if(op!="hide") return false; } if(obj.style.pixelHeight-opp>1) { if(opd>1){ if(sd-sc<1){obj.filters.alpha.opacity-=1;sd+=opd;} sc++; }else{ obj.filters.alpha.opacity-=Math.ceil(1/opd)*0.38; } obj.style.pixelHeight-=opp; setTimeout('menuHide(cacheObj,cacheMaxh,cacheObj2)','5'); }else{ obj.style.pixelHeight=1; obj.style.display='none'; obj.filters.alpha.opacity=0; fstrun=1; op=""; sc=1;sd=1; mountmfunc(1,1,1); if(whichContinue && onemenu==1) whichContinue.click(); return true; } } //---------------------------------------------------------------------------------------- function menuChange(obj,maxh,obj2) { if(obj.style.pixelHeight>1) { menuHide(obj,maxh,obj2); whichOpen=''; } else if(whichOpen) { whichContinue=obj2; whichOpen.click(); } else { menuShow(obj,maxh,obj2); if(onemenu==1)whichOpen=obj2; whichContinue=''; } } //---------------------------------------------------------------------------------------- function mountmfunc(clk,mi,mo){ //var=1 mount, var=0 disable var=2 do nothing //clk=mouse click function //mi=mouse over function //mo=mouse out function if(clk==1){document.onclick=monclick;}else if(clk==0){document.onclick="return false;";}else{} if(mi==1){document.onmousemove=monmouseover;}else if(mi==0){document.onmousemove="return false;";}else{} if(mo==1){document.onmouseout=monmouseout;}else if(mo==0){document.onmouseout="return false;";}else{} for(i=1;i<mnunum;i++){ eval("document.all.menuTitle"+i+".className='menu_title';"); } } //---------------------------------------------------------------------------------------- //[Public] var regex=new RegExp("menuTitle\d*","i"); var regex1=new RegExp("[0-9]*$","i"); var boo=0; //---------------------------------------------------------------------------------------- function monmouseover(){ if(event.srcElement.tagName!="TD" || boo==1) return false; if(regex.test(event.srcElement.id)){ event.srcElement.className="menu_title2"; boo=1; } } //---------------------------------------------------------------------------------------- function monmouseout(){ if(event.srcElement.tagName!="TD") return false; if(regex.test(event.srcElement.id)){ event.srcElement.className="menu_title"; boo=0; } } //---------------------------------------------------------------------------------------- function monclick(){ if(!browser.isIE5up || browser.isIE55) return true; if(event.srcElement.tagName=="A") return true; if(event.srcElement.tagName=="SPAN"){ if(regex.test(event.srcElement.parentNode.id)){ b=event.srcElement.parentNode.id.match(regex1); codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.parentNode.id+ ")"; eval(codex); } } if(regex.test(event.srcElement.id)){ b=event.srcElement.id.match(regex1); codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.id+ ")"; eval(codex); } } //---------------------------------------------------------------------------------------- function init(){ if (document.readyState!="complete") return false; if(!browser.isIE5up || browser.isIE55) return false; if(!developversion)window.onerror = function(){window.onerror = blockError;return true;}; var mccount=0; var showornot; reg=new RegExp("menu[0-9]{1,2}","i"); reg1=new RegExp("[0-9]*$","i"); for(i=0;i<document.all.length;i++){ if(reg.test(document.all[i].id)){ mnunum++; s=document.all[i].id.match(reg1); k=eval("document.all.menu" + s + ".children[0].offsetHeight"); //code to get the height eval("menuinit[s][2]=k"); for(n=0;n<document.all[i].childNodes.length;n++){ if(document.all[i].childNodes.item(n).tagName=="SPAN"){ //document.all[i].childNodes.item(n). } } eval("showornot=menuinit[s][1]"); switch (showornot){ case "show": if(++mccount>1 && onemenu==1)alert("You do not supposed put on 2 active menu while 'onemenu' on. Check your setting or turn 'onemenu' to '0'"); if(onemenu==1)eval("whichOpen=menuTitle" + s); document.all[i].style.filter+="alpha(Opacity=100)"; document.all[i].style.overflow="hidden"; document.all[i].style.height=k; document.all[i].style.display="block"; eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_hide+'"'); break; case "not show": document.all[i].style.filter+="alpha(Opacity=0)"; document.all[i].style.overflow="hidden"; document.all[i].style.height="1"; document.all[i].style.display="none"; eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_show+'"'); break; default: alert("Expect 'show' or 'not show' in setting section!"); } } } } //---------------------------------------------------------------------------------------- function xpmenucmd(op,arg1,arg2){ if (document.readyState!="complete") return false; switch(op){ case "null": break; case "show": if(arg1!=undefined && arg1>0 && arg1<=mnunum){ if(onemenu){ for(i=1;i<=mnunum;i++){ if(i==arg1){ eval('document.all.menu'+arg1+'.filters.alpha.opacity=100'); eval('document.all.menu'+arg1+'.style.height="'+menuinit[arg1][2]+'"'); eval('document.all.menu'+arg1+'.style.display="block"'); eval('document.all.menuTitle'+arg1+'.background="'+bgimages_hide+'"'); eval('whichOpen=document.all.menuTitle'+arg1); }else{ eval('document.all.menu'+i+'.filters.alpha.opacity=0'); eval('document.all.menu'+i+'.style.height="1"'); eval('document.all.menu'+i+'.style.display="none"'); eval('document.all.menuTitle'+i+'.background="'+bgimages_show+'"'); } } }else{ eval('document.all.menu'+arg1+'.filters.alpha.opacity=100'); eval('document.all.menu'+arg1+'.style.height="'+menuinit[arg1][2]+'"'); eval('document.all.menu'+arg1+'.style.display="block"'); eval('document.all.menuTitle'+arg1+'.background="'+bgimages_hide+'"'); } } break; case "hide": if(arg1!=undefined && arg1>0 && arg1<=mnunum){ eval('document.all.menu'+arg1+'.filters.alpha.opacity=0'); eval('document.all.menu'+arg1+'.style.height="1"'); eval('document.all.menu'+arg1+'.style.display="none"'); eval('document.all.menuTitle'+arg1+'.background="'+bgimages_show+'"'); whichContinue=''; whichOpen=''; } break; case "set mode": switch(arg1){ case "s": onemenu=1; xpmenucmd("hide all"); break; case "m": onemenu=0; whichOpen=""; break; default: alert("arg1 error!\n\ne.g. xpmenucmd('set mode','[ m | s ]')"); return false; } return true; break; case "query mode": switch(onemenu){ case 1: return "s"; break; case 0: return "m" break; default: alert("something was wrong. onemenu must either be 1 or 0!"); } break; case "show all": if(!onemenu){ for(i=1;i<=mnunum;i++){ eval('document.all.menu'+i+'.filters.alpha.opacity=100'); eval('document.all.menu'+i+'.style.height="'+menuinit[i][2]+'"'); eval('document.all.menu'+i+'.style.display="block"'); eval('document.all.menuTitle'+i+'.background="'+bgimages_hide+'"'); } whichContinue=''; whichOpen=''; }else{ alert("you can only use this command in multi-menu mode!"); } break; case "hide all": for(i=1;i<=mnunum;i++){ eval('document.all.menu'+i+'.filters.alpha.opacity=0'); eval('document.all.menu'+i+'.style.height="1"'); eval('document.all.menu'+i+'.style.display="none"'); eval('document.all.menuTitle'+i+'.background="'+bgimages_show+'"'); } whichContinue=''; whichOpen=''; break; case "query value": return eval(arg1); break; case "exec javascript": return eval(arg1); break; case "set value": return eval(arg1+"="+arg2); break; case "show version": var regex=/\((.*)\)/; alert("XP Style Menu\n\n"+regex.exec(vers)[1]); break; default: alert("Don't understood your command.\n\ne.g. xpmenucmd('command','arg1','arg2')"); } return true; } //---------------------------------------------------------------------------------------- if(browser.isNS6up || browser.isIE5up){ mountmfunc(1,1,1); }else{ mountmfunc(1,2,2); } document.onreadystatechange = init; //Let's go! //That's the end of my code. //======================================================================================== //Browser detect script by Chris Nott //(NEEDED!DO NOT DEL.) function BrowserDetectLite() { var ua = navigator.userAgent.toLowerCase(); // browser name this.isGecko = (ua.indexOf('gecko') != -1); this.isMozilla = (this.isGecko && ua.indexOf("gecko/") + 14 == ua.length); this.isNS = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) ); this.isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) ); this.isOpera = (ua.indexOf("opera") != -1); this.isKonqueror = (ua.indexOf("konqueror") != -1); this.isIcab = (ua.indexOf("icab") != -1); this.isAol = (ua.indexOf("aol") != -1); this.isWebtv = (ua.indexOf("webtv") != -1); // spoofing and compatible browsers this.isIECompatible = ( (ua.indexOf("msie") != -1) && !this.isIE); this.isNSCompatible = ( (ua.indexOf("mozilla") != -1) && !this.isNS && !this.isMozilla); // browser version this.versionMinor = parseFloat(navigator.appVersion); // correct version number if (this.isNS && this.isGecko) { this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) ); } else if (this.isIE && this.versionMinor >= 4) { this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); } else if (this.isOpera) { if (ua.indexOf('opera/') != -1) { this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) ); } else { this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) ); } } else if (this.isKonqueror) { this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) ); } else if (this.isIcab) { if (ua.indexOf('icab/') != -1) { this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) ); } else { this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) ); } } else if (this.isWebtv) { this.versionMinor = parseFloat( ua.substring( ua.indexOf('webtv/') + 6 ) ); } this.versionMajor = parseInt(this.versionMinor); this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 ); // dom support this.isDOM1 = (document.getElementById); this.isDOM2Event = (document.addEventListener && document.removeEventListener); // css compatibility mode this.mode = document.compatMode ? document.compatMode : 'BackCompat'; // platform this.isWin = (ua.indexOf('win') != -1); this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1) ); this.isMac = (ua.indexOf('mac') != -1); this.isUnix = (ua.indexOf('unix') != -1 || ua.indexOf('linux') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1) // specific browser shortcuts this.isNS4x = (this.isNS && this.versionMajor == 4); this.isNS40x = (this.isNS4x && this.versionMinor < 4.5); this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7); this.isNS4up = (this.isNS && this.versionMinor >= 4); this.isNS6x = (this.isNS && this.versionMajor == 6); this.isNS6up = (this.isNS && this.versionMajor >= 6); this.isIE4x = (this.isIE && this.versionMajor == 4); this.isIE4up = (this.isIE && this.versionMajor >= 4); this.isIE5x = (this.isIE && this.versionMajor == 5); this.isIE55 = (this.isIE && this.versionMinor == 5.5); this.isIE5up = (this.isIE && this.versionMajor >= 5); this.isIE6x = (this.isIE && this.versionMajor == 6); this.isIE6up = (this.isIE && this.versionMajor >= 6); this.isIE4xMac = (this.isIE4x && this.isMac); } // --> </SCRIPT> <!--End XP Style Menu--> <title>XP Style Menu</title> </head> <body bgcolor="#598AD7"> <div id="Layer1" style="position:absolute; left:13px; top:37px; z-index:1"> <table border="0" cellspacing="0" cellpadding="0"> <tr style="cursor:hand;"> <td width="166" height="28" ID=menuTitle1 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> .:: Menu 01 </span></td> </tr> <tr> <td width="166"><div id="menu1" class="sec_menu"> <table width="164" border="0" cellpadding="0" cellspacing="10"> <tr> <td><div align="center"><a href="#1">Item 01</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 02</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 03</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 04</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 05</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 06</a></div></td> </tr> </table> </div></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr style="cursor:hand;"> <td width="166" height="28" ID=menuTitle2 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> .:: Menu 02 </span></td> </tr> <tr> <td width="166"><div id="menu2" class="sec_menu"> <table width="164" border="0" cellpadding="0" cellspacing="10"> <tr> <td><div align="center"><a href="#1">Item 01</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 02</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 03</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 04</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 05</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 06</a></div></td> </tr> </table> </div></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0"> <tr style="cursor:hand;"> <td width="166" height="28" ID=menuTitle3 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> .:: Menu 03 </span></td> </tr> <tr> <td width="166"><div id="menu3" class="sec_menu"> <table width="164" border="0" cellpadding="0" cellspacing="10"> <tr> <td><div align="center"><a href="#1">Item 01</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 02</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 03</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 04</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 05</a></div></td> </tr> <tr> <td><div align="center"><a href="#1">Item 06</a></div></td> </tr> </table> </div></td> </tr> </table> </div> XP菜单特效 </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
