Javascript +CSS横向三级导航菜单_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

Javascript +CSS横向三级导航菜单

作者：闵涛文章来源：闵涛的学习笔记点击数：1932 更新时间：2009/4/23 13:49:55

nav item.
- nav item.
  - nav item.
  - nav item.
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
- nav item.
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
  - nav item
nav item.
- nav item
- nav item
- nav item
- nav item
- nav item
- nav item
nav item.
- nav item
- nav item
- nav item
- nav item
- nav item
- nav item

<!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=utf-8" /> <title> ĵ</title> <style> body { margin: 7px; font:12px Verdana, Arial, Helvetica, sans-serif; } * { list-style-type: none; margin: 0px; padding: 0px; border: thin none; } #nav { position: absolute; font-size: 9px; opacity: 0.8; } #nav a { display: block; width: 100px; height: 15px; padding: 3px 5px 12px; background: #666; color: #fff; text-decoration: none; } #nav a:hover { background: #333; } #nav li { width: 120px; height:30px; overflow:hidden; background: #ccc; padding-bottom: 3px; } #nav ul { position: absolute; margin-left: 110px; margin-top: -30px; } html>body #nav ul { margin-left: 119px; margin-top: -39px; } #nav ul { display: none; } #nav li.show ul { display: block; } #nav li.show li ul { display: none; } #nav li li.show ul { display: block; } </style> <script language="javascript" type="text/javascript"> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmou<a class="channel_keylink" href="http://www.mintao.net/blog/" target="_blank">seo</a>ver=function() { this.className+=(this.className.length>0? " ": "") + "show"; } sfEls[i].onmou<a class="channel_keylink" href="http://www.mintao.net/blog/" target="_blank">seo</a>ut=function() { this.className=this.className.replace(new RegExp("( ?|^)show\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a>.</li> <li><a href="#">nav item</a>.</li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul> </li> <li><a href="#">nav item</a>. <ul> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </p><p align='center'><b><font color='red'>[1]</font> <a href='ShowArticle.asp?ArticleID=20561&Page=2'>[2]</a> <a href='ShowArticle.asp?ArticleID=20561&Page=2'>下一页</a></b></p><br>[<a class="" href="/Article/ShowClass.asp?ClassID=114">Web开发</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=33822' title='文章标题：css ul li 不换行作者：css ul li 不换行更新时间：2012/6/8 19:05:29' target="_self">css ul li 不换行</a> [<a class="" href="/Article/ShowClass.asp?ClassID=114">Web开发</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=32013' title='文章标题：用PHP实现Javascript的escape(),unescape()的方法作者：武汉SEO闵涛更新时间：2010/2/2 14:16:47' target="_self">用PHP实现Javascript的escape(),unescape()的方法</a><br>[<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=31017' title='文章标题：如何正确的理解CSS的float浮动属性？作者：武汉SEO闵涛更新时间：2010/1/6 5:39:22' target="_self">如何正确的理解CSS的float浮动属性？</a> [<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=31010' title='文章标题：Javascript获取各种浏览器可见窗口大小作者：武汉SEO闵涛更新时间：2010/1/1 23:23:35' target="_self">Javascript获取各种浏览器可见窗口大小</a><br>[<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20793' title='文章标题：CSS 3 选择器解释作者：武汉SEO闵涛更新时间：2009/4/23 14:10:12' target="_self">CSS 3 选择器解释</a> [<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20792' title='文章标题：CSS Image Maps—图像地图作者：武汉SEO闵涛更新时间：2009/4/23 14:10:12' target="_self">CSS Image Maps—图像地图</a><br>[<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20790' title='文章标题：一款DIV+CSS导航条效果作者：武汉SEO闵涛更新时间：2009/4/23 14:10:12' target="_self">一款DIV+CSS导航条效果</a> [<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20768' title='文章标题：xml css htc 的综合运用作者：武汉SEO闵涛更新时间：2009/4/23 14:10:08' target="_self">xml css htc 的综合运用</a><br>[<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20762' title='文章标题：用GoLive实现CSS+DIV之二作者：武汉SEO闵涛更新时间：2009/4/23 14:10:06' target="_self">用GoLive实现CSS+DIV之二</a> [<a class="" href="/Article/ShowClass.asp?ClassID=115">网页制作</a>]<a class='LinkArticleCorrelative' href='/Article/ShowArticle.asp?ArticleID=20740' title='文章标题：Javascript 表单之间的数据传递作者：武汉SEO闵涛更新时间：2009/4/23 14:09:55' target="_self">Javascript 表单之间的数据传递</a><br> <script type="text/javascript"> /*728*90，创建于2010-9-16*/ var cpro_id = 'u203664';</script> <script type="text/javascript" src="http://cpro.baidu.com/cpro/ui/c.js"></script> <script language=javascript> document.body.oncopy=function(){ event.returnValue=false; var t=document.selection.createRange().text; var s=" 来源:[学习笔记★闵涛★计算机学习电脑编程软硬件技巧-网页制作] "+location.href; window.clipboardData.setData('Text', t+'\r\n'+s); } </script><center></center></td></tr> <tr><td height="10"></td></tr> <tr><td align='right' class="Article_tdbgall">教程录入：mintao 责任编辑：mintao </td></tr> <tr><td height="1" background="/Skin/sealove/line01.gif"></td></tr> <tr><td height="6"></td></tr> <tr><td><li>上一篇教程： <a class='LinkPrevArticle' href='/Article/ShowArticle.asp?ArticleID=20560' title='文章标题：CSS基础：CSS2盒模型作者：武汉SEO闵涛更新时间：2009/4/23 13:49:54'>CSS基础：CSS2盒模型</a></li><br><li>下一篇教程： <a class='LinkNextArticle' href='/Article/ShowArticle.asp?ArticleID=20562' title='文章标题：CSS+DIV实现Yahoo搜索框的制作作者：武汉SEO闵涛更新时间：2009/4/23 13:49:55'>CSS+DIV实现Yahoo搜索框的制作</a></li></td></tr> <tr><td height="6"></td></tr> <tr><td height="1" bgcolor="#CCCCCC"></td></tr> <tr><td height="22" bgcolor="#F2F2F2" align="right">【字体：<a href="javascript:fontZoomA();" class="top_UserLogin">小</a> <a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】【<a href="/Article/Comment.asp?ArticleID=20561" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=1&InfoID=20561" target="_blank">加入收藏</a>】【<a href="/Article/SendMail.asp?ArticleID=20561" target="_blank">告诉好友</a>】【<a href="/Article/Print.asp?ArticleID=20561" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 </td></tr> <tr><td height="1" bgcolor="#CCCCCC"></td></tr> </table> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td height="25">　<img src="/Images/TEAM.gif" align="absmiddle"> 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] </td></tr> <tr><td height="25">　<img src="/Images/TEAM.gif" align="absmiddle">　<b>网友评论：</b>（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）</td></tr> <tr><td class="main_tdbg_760"> <script language='javascript' src='/Article/Comment.asp?Action=JS&CommentNum=10&ArticleID=20561'></script> </td></tr> </table><br> </td> </tr> </table> </td> <td width="5"></td> <td width="1" bgcolor="#EEEEEE"></td> <td width="5"></td> <td width="170" valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="33" height="28"><img src="/Skin/sealove/Column01_L.gif"></td> <td background="/Skin/sealove/Column01_BG.gif" style="color:#FFFFFF"><b>同类栏目</b></td> <td width="10"><img src="/Skin/sealove/Column01_R.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="1" bgcolor="#AAAAAA"></td> <td valign="top"> <table width="96%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td height="70" valign="top">· <a class='childclass' href='/Article/ShowClass.asp?ClassID=114' target="_self">Web开发</a> · <a class='childclass' href='/Article/ShowClass.asp?ClassID=115' target="_self">网页制作</a><br>· <a class='childclass' href='/Article/ShowClass.asp?ClassID=27' target="_self">平面设计</a> · <a class='childclass' href='/Article/ShowClass.asp?ClassID=28' target="_self">网站运营</a><br>· <a class='childclass' href='/Article/ShowClass.asp?ClassID=29' target="_self">网站推广</a> · <a class='childclass' href='/Article/ShowClass.asp?ClassID=30' target="_self">搜索优化</a><br>· <a class='childclass' href='/Article/ShowClass.asp?ClassID=116' target="_self">建站心得</a> · <a class='childclass' href='/Article/ShowClass.asp?ClassID=117' target="_self">站长故事</a><br>· <a class='childclass' href='/Article/ShowClass.asp?ClassID=66' target="_self">互联动态</a></td></tr> </table> </td> <td width="1" bgcolor="#AAAAAA"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="6" height="23"><img src="/Skin/sealove/Column01_Lb.gif"></td> <td background="/Skin/sealove/Column01_BGb.gif" align="right"><img src="/Skin/sealove/More01.gif" border="0" alt="更多内容"></td> <td width="6"><img src="/Skin/sealove/Column01_Rb.gif"></td> </tr> <tr><td colspan="3" height="8"><img src="/Skin/sealove/space.gif"></td></tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="14" height="28"><img src="/Skin/sealove/Column02_L.gif"></td> <td background="/Skin/sealove/Column02_BG.gif" style="color:#0099BB"><b>热门推荐</b></td> <td width="45" background="/Skin/sealove/Column02_BG.gif" align="right"><a href="/Article/ShowElite.asp"><img src="/Skin/sealove/More01.gif" border="0" alt="更多内容"></a></td> <td width="10"><img src="/Skin/sealove/Column02_R.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="7" background="/Skin/sealove/Column02_Lc.gif"></td> <td valign="top"> <table width="96%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td height="80" valign="top"><li>没有教程</li></td></tr> </table> </td> <td width="7" background="/Skin/sealove/Column02_Rc.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="8" height="7"><img src="/Skin/sealove/Column02_Lb.gif"></td> <td background="/Skin/sealove/Column02_BGb.gif"><img src="/Skin/sealove/space.gif"></td> <td width="8"><img src="/Skin/sealove/Column02_Rb.gif"></td> </tr> <tr><td colspan="3" height="8"><img src="/Skin/sealove/space.gif"></td></tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="33" height="28"><img src="/Skin/sealove/Column01_L.gif"></td> <td background="/Skin/sealove/Column01_BG.gif" style="color:#FFFFFF"><b>赞助链接</b></td> <td width="10"><img src="/Skin/sealove/Column01_R.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="1" bgcolor="#AAAAAA"></td> <td valign="top"> <table width="98%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td height="600" valign="top"> <script type="text/javascript"> /*160*600，创建于2010-9-16*/ var cpro_id = 'u203713';</script> <script type="text/javascript" src="http://cpro.baidu.com/cpro/ui/c.js"></script> </td></tr> </table> </td> <td width="1" bgcolor="#AAAAAA"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="6" height="23"><img src="/Skin/sealove/Column01_Lb.gif"></td> <td background="/Skin/sealove/Column01_BGb.gif" align="right"><img src="/Skin/sealove/More01.gif" border="0" alt="更多内容"></td> <td width="6"><img src="/Skin/sealove/Column01_Rb.gif"></td> </tr> <tr><td colspan="3" height="8"><img src="/Skin/sealove/space.gif"></td></tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="14" height="28"><img src="/Skin/sealove/Column02_L.gif"></td> <td background="/Skin/sealove/Column02_BG.gif" style="color:#0099BB"><b><a href="http://www.mintao.net/blog/" target="_blank">闵涛</a>博文</b></td> <td width="45" background="/Skin/sealove/Column02_BG.gif" align="right"><a href="/blog/"><img src="/Skin/sealove/More01.gif" border="0" alt="更多关于武汉SEO的内容"></a></td> <td width="10"><img src="/Skin/sealove/Column02_R.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="7" background="/Skin/sealove/Column02_Lc.gif"></td> <td valign="top"> <table width="96%" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td height="80" valign="top"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>500 - 内部服务器错误。</title> <style type="text/css">  </style> </head> <body> <div id="header"><h1>服务器错误</h1></div> <div id="content"> <div class="content-container"><fieldset> <h2>500 - 内部服务器错误。</h2> <h3>您查找的资源存在问题，因而无法显示。</h3> </fieldset></div> </div> </body> </html> </td></tr> </table> </td> <td width="7" background="/Skin/sealove/Column02_Rc.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="8" height="7"><img src="/Skin/sealove/Column02_Lb.gif"></td> <td background="/Skin/sealove/Column02_BGb.gif"><img src="/Skin/sealove/space.gif"></td> <td width="8"><img src="/Skin/sealove/Column02_Rb.gif"></td> </tr> <tr><td colspan="3" height="8"><img src="/Skin/sealove/space.gif"></td></tr> </table> </td> <td width="5"></td> <td width="8" background="/Skin/sealove/Main_Right.gif"></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=1000 align=center bgColor=#ffffff border=0> <tr> <td width=8 background=/Skin/sealove/Main_Left.gif></td> <td vAlign=top> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td bgColor=#faac24 height=1></td> </tr> <tr> <td height=1></td> </tr> <tr> <td bgColor=#faac24 height=9></td> </tr> <tr> <td height=1></td> </tr> <tr> <td bgColor=#faac24 height=1></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="90%" align=center border=0> <tr> <td style="COLOR: #000000" align=middle height=25>| <A class=Bottom onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.mintao.net/');" href="#">设为首页</A> |<A class=Bottom href="javascript:window.external.addFavorite('http://www.mintao.net/','学习笔记★闵涛★计算机学习电脑编程软硬件技巧');">加入收藏</A> | <A class=Bottom href="mailto:admin@mintao.net">联系站长</A> | <A class=Bottom href="/FriendSite/Index.asp" target=_blank>友情链接</A> | <A class=Bottom href="/Copyright.asp" target=_blank>版权申明</A> | <A class=Bottom href="/html/friends.html" target=_blank>广告服务</A> </td> </tr> <tr> <td background=/Skin/sealove/line01.gif height=1></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td align=middle width=210><A href="http://www.mintao.net/" target=_blank><IMG alt=MinTao学以致用网 src="/Skin/sealove/PElogo_sealove.gif" border=0></A></td> <td><table border=0 width=100% cellspacing=0 cellpadding=0> <tr> <td colspan=2> <p align=center><span style='font-size: 9pt'>Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（<A href='http://www.mintao.net/'>学习笔记</A>） Inc All Rights Reserved. <br> <A href='http://www.mintao.net/'>闵涛</A> <a target="blank" href="http://wpa.qq.com/msgrd?V=1&Uin=543098146&Site=敏韬网&Menu=yes" rel="nofollow"><img border="0" SRC=http://wpa.qq.com/pa?p=1:543098146:10 alt='投放广告、内容合作请Q我!'></a> E_mail:admin@mintao.net(欢迎提供学习资源)</span></p> <div style="width:300px;margin:0 auto; padding:1px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102001154" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://www.mintao.net/images/beian_ico.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42011102001154号</p></a> </div> <p align=center><span style='font-size: 9pt'> 站长：<A href='http://www.mintao.net/'>MinTao</A> <align=center><span style='font-size: 9pt;color:#7f270f'>ICP备案号：<a target="_blank" href="https://beian.miit.gov.cn">鄂ICP备11006601号-18</a> <script src='http://s79.cnzz.com/stat.php?id=495319&web_id=495319&show=pic' language='JavaScript' charset='gb2312'></script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F83055e3c4dcc2c9c0e7ad2643e08b99d' type='text/javascript'%3E%3C/script%3E")); </script> </span></p></td> </tr> <tr> <td align=center> 闵涛站盟:<A href='http://pub.mintao.net/' target='_blank'>医药大全</A>-<A href='http://www.iwuxue.com/' target='_blank'>武穴网</A>。<A href='http://www.mintao.net/sitemap_index.xml' target='_blank'>A</A>打造<A href='http://www.mintao.net/SiteMap/Soft1.htm' target='_blank'>B</A>、<A href='http://www.mintao.net/SiteMap/Article1.htm' target='_blank'>C</A>、<A href='http://www.mintao.net/SiteMap/Photo1.htm' target='_blank'>D</A>……</span></td> <td> </td> </tr> </table> <script language="JavaScript" src="http://www.mintao.net/js/qqkf.js"></script> </td> <td width=20></td> <td width=120 height=80><A href="http://xianning.cyberpolice.cn/" rel="nofollow" target=_blank><IMG alt=咸宁网络警察报警平台 src="http://www.mintao.net/images/xnwj.gif" width=120 border=0></A></td> </tr> </table> </td> <td width=8 background=/Skin/sealove/Main_Right.gif></td> </tr> </table> <script type="text/javascript"> /*blog.mintao.net250*200 创建于 2015-07-01*/ var cpro_id = "u2183153"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/f.js" type="text/javascript"></script> <table width="1000" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td width="15"><img src="/Skin/sealove/Main_BottomLeft.gif"></td> <td height="11" background="/Skin/sealove/Main_BottomBG.gif"><img src="/Skin/sealove/space.gif"></td> <td width="15"><img src="/Skin/sealove/Main_BottomRight.gif"></td> </tr> <tr><td colspan="3" height="5"></td></tr> </table> </body> </html><NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>