纯 CSS 弹出菜单 之 横排三级分类(兼容多个浏览器) By shawl.qiu

类别： 技术记, CSS
标签：
摘要：
正文：

纯 CSS 弹出菜单 之 横排三级分类(兼容多个浏览器) By shawl.qiu

 说明:
 之前写过 纯 CSS 的二级分类菜单, 不过那是二级, 写是很容易, 不过今天搞这个三级分类, 天呀, 整整花了鄙人一天的青春..真晕...
 有鉴于此, 特把写好的三级CSS菜单写文一篇, 以后遇到三级分类, 这个就是模板了...
 
 附: 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
 http://blog.csdn.net/btbtd/archive/2006/10/01/1315336.aspx
 
 shawl.qiu
 2007-01-09
 http://blog.csdn.net/btbtd
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>shawl.qiu asp/jscript 个人源代码管理系统</title>
  6. <style type="text/css">
  7. /*<![CDATA[*/ 
  8. /* shawl.qiu CSS Document : shawl.qiu@gmail.com */
  9.  body{
  10.   margin:0px auto;
  11.   width:760px;
  12.   background-color:rgb(252,252,252);
  13.  }
  14.  *{
  15.   margin:0px;
  16.   padding:0px; 
  17.   text-decoration:none;
  18.  }
  19.   .fltr{
  20.   float:right;
  21.  }
  22.   .fltl{
  23.   float:left;
  24.  }
  25.   a:link{
  26.   color:black;
  27.  }
  28.   a:hover{
  29.   background-color:yellow!important;
  30.   color:black;
  31.  }
  32.   a:visited{
  33.   background-color:rgb(248,248,248);
  34.  }
  35.  hr{
  36.   border-top: 1px dashed #FFFFFF!important;
  37.   border-right: 1px dashed #FFFFFF!important;
  38.   border-bottom:1px dashed black!important; 
  39.   border-left: 1px dashed #FFFFFF!important;
  40.   margin:10px 0px;
  41.   }
  42.    p{
  43.   margin:5px 0px;
  44.  }
  45. /*]]>*/
  46. </style>
  47. <style type="text/css">
  48. /*<![CDATA[*/ 
  49.  #sqMenu * {
  50.   list-style-type:none;
  51.   margin:0px;
  52.   padding:0px;
  53.  }
  54.   #sqMenu ul{
  55.   float:left;
  56.   padding:1px 10px 1px 0px;
  57.  }
  58.   ul ul{
  59.   display:none;
  60.  }
  61.   #sqMenu ul * ul{
  62.   border-top: 1px dashed black;
  63.   border-left: 1px dashed black;
  64.   border-right: 1px dashed black;
  65.  } 
  66.   .cat2 * a{
  67.   display:block;
  68.   width:80px;
  69.   background-color:#fff;
  70.   border-bottom:1px dashed black; 
  71.   padding:2px 0px!important;
  72.  }
  73.  /*]]>*/
  74. </style>
  75. <!--[if !IE]><-->
  76. <style type="text/css">
  77. /*<![CDATA[*/ 
  78.  #sqMenu{ 
  79.   display:table; 
  80.   width:100%;
  81.   background-color:#f8f8f8;  /* 主背景色*/
  82.  }
  83.   #sqMenu ul:hover > li.cat2{
  84.   display:block;
  85.   position:relative;
  86.  }
  87.   #sqMenu ul:hover > .cat2 ul{
  88.   display:block;
  89.   width:80px;
  90.   position:absolute;
  91.   padding:0px 0px 0px 2px;
  92.  }
  93.   #sqMenu ul:hover > .cat2 ul li ul{
  94.   display:none;
  95.   position:absolute;
  96.  }
  97.  .cat3:hover > ul{
  98.   display:block!important;
  99.   left:80px;
  100.   width:120px;
  101.   margin:-22px 0px 0px 2px!important;
  102.   position:absolute;
  103.  } 
  104. /*]]>*/
  105. </style>
  106. <!--><![endif]-->
  107. <!--[if IE]>
  108. <style type="text/css">
  109. /*<![CDATA[*/ 
  110.  #sqMenu{ 
  111.   display:table; 
  112.   width:100%;
  113.   background-color:#f8f8f8;  /* 主背景色*/
  114.   height:20px;
  115.   overflow:hidden;
  116.  }
  117.   .cat2 ul{
  118.   padding:0px 0px 0px 2px!important;
  119.  }
  120.   .liHt{
  121.   display:inline!importnat;
  122.  }
  123.  .cat2_{
  124.   display:block;
  125.   position:absolute;
  126.  }
  127.   .cat3_{
  128.   display:block;
  129.   position:absolute;
  130.   left:80px;
  131.   margin:-20px 0px 0px 0px!important;
  132.  }
  133.   .hid{
  134.   display:none;
  135.  }
  136. /*]]>*/
  137. </style>
  138. <script type="text/javascript">
  139. //<![CDATA[
  140.  onload=function(){
  141.   var oMain=document.getElementById('sqMenu');
  142.    for(var i=0, j=oMain.childNodes.length; i<j; i++){
  143.     try{
  144.      var oTemp=oMain.childNodes[i];
  145.      oTemp.onmousemove=function(){
  146.       try{
  147.        var oCld=this.childNodes[1];
  148.        var oUl=oCld.childNodes[0];
  149.         oUl.className='cat2_';
  150.         oUl.onmouseout=function(){
  151.          this.className='hid';
  152.         }
  153.         try{
  154.          for(var i1=0, j1=oUl.childNodes.length; i1<j1; i1++){
  155.           try{
  156.            var oLiSub=oUl.childNodes[i1];
  157.             oLiSub.className='liHt';
  158.             oLiSub.onmousemove=function(){
  159.              try{
  160.              var oUlSub=this.getElementsByTagName('ul')[0];
  161.               oUlSub.className='cat3_';
  162.               oUlSub=null;
  163.              } catch(e){}
  164.             }
  165.             oLiSub.onmouseout=function(){
  166.              try{
  167.              var oUlSub=this.getElementsByTagName('ul')[0];
  168.               oUlSub.className='hid';
  169.               oUlSub=null;
  170.              }catch(e){}
  171.             }
  172.            oLiSub=null;
  173.           }catch(e){} // end try 4
  174.          } // end for 2
  175.         }catch(e){} // end try 3
  176.         oUl=null;
  177.       }catch(e){} // end try2
  178.      }
  179.      oTemp=null;
  180.     }catch(e){} // end try 1
  181.    } // end for 1
  182.    oMain=null;
  183.  }
  184. //]]>
  185. </script>
  186. <![endif]-->
  187. </head>
  188. <body>
  189. <div>
  190.  <div style='float:right;'>
  191.      <a href='http://127.0.0.1:85/post.asp'>发文</a>
  192.    <a href='http://127.0.0.1:85/manage.asp'>管理</a>
  193.    <a href='http://127.0.0.1:85/login.asp?id=logout'>登出</a>
  194.    </div>
  195.  <div style='float:left;'>
  196.   <a href='http://127.0.0.1:85/default.asp'>首页</a>
  197.   <a href='http://127.0.0.1:85/category.asp'>类别</a>
  198.   <a href='http://127.0.0.1:85/tag.asp'>标签</a>
  199.   <a href='http://127.0.0.1:85/search.asp'>搜索</a>
  200.  </div>
  201. </div><br/ clear='both' />
  202. <div id="sqMenu">
  203. <ul>
  204.  <li><a href="category.asp?cat1id=1">JScript</a></li>
  205.  <li class="cat2">
  206.   <ul>
  207.    <li class="cat3"><a href="category.asp?cat1id=1&cat2id=1">函数库</a>
  208.     <ul>
  209.      <li><a href="category.asp?cat1id=1&cat2id=1&cat3id=2">文件</a></li>
  210.      <li><a href="category.asp?cat1id=1&cat2id=1&cat3id=3">测试</a></li>
  211.      <li><a href="category.asp?cat1id=1&cat2id=1&cat3id=0">无分类</a></li>
  212.     </ul>
  213.    </li>
  214.    <li class="cat3"><a href="category.asp?cat1id=1&cat2id=4">类库</a>
  215.     <ul>
  216.      <li><a href="category.asp?cat1id=1&cat2id=4&cat3id=6">数据操作</a></li>
  217.      <li><a href="category.asp?cat1id=1&cat2id=4&cat3id=0">无分类</a></li>
  218.     </ul>
  219.    </li>
  220.    <li class="cat3"><a href="category.asp?cat1id=1&cat2id=8">杂类</a>
  221.     <ul>
  222.      <li><a href="category.asp?cat1id=1&cat2id=8&cat3id=0">无分类</a></li>
  223.     </ul>
  224.    </li>
  225.    <li class="cat3"><a href="category.asp?cat1id=1&cat2id=9">prototype库</a>
  226.     <ul>
  227.      <li><a href="category.asp?cat1id=1&cat2id=9&cat3id=0">无分类</a></li>
  228.     </ul>
  229.    </li>
  230.    <li><a href="category.asp?cat1id=1&cat2id=0">无分类</a></li>
  231.   </ul>
  232.  </li>
  233. </ul>
  234. <ul>
  235.  <li><a href="category.asp?cat1id=5">JavaScript</a></li>
  236.  <li class="cat2">
  237.   <ul>
  238.    <li class="cat3"><a href="category.asp?cat1id=5&cat2id=7">杂类</a>
  239.     <ul>
  240.      <li><a href="category.asp?cat1id=5&cat2id=7&cat3id=0">无分类</a></li>
  241.     </ul>
  242.    </li>
  243.    <li class="cat3"><a href="category.asp?cat1id=5&cat2id=11">类库</a>
  244.     <ul>
  245.      <li><a href="category.asp?cat1id=5&cat2id=11&cat3id=0">无分类</a></li>
  246.     </ul>
  247.    </li>
  248.    <li class="cat3"><a href="category.asp?cat1id=5&cat2id=12">函数库</a>
  249.     <ul>
  250.      <li><a href="category.asp?cat1id=5&cat2id=12&cat3id=0">无分类</a></li>
  251.     </ul>
  252.    </li>
  253.    <li><a href="category.asp?cat1id=5&cat2id=0">无分类</a></li>
  254.   </ul>
  255.  </li>
  256. </ul>
  257. <ul>
  258.  <li><a href="category.asp?cat1id=7">VBScript</a></li>
  259.  <li class="cat2">
  260.   <ul>
  261.    <li class="cat3"><a href="category.asp?cat1id=7&cat2id=10">类库</a>
  262.     <ul>
  263.      <li><a href="category.asp?cat1id=7&cat2id=10&cat3id=0">无分类</a></li>
  264.     </ul>
  265.    </li>
  266.    <li><a href="category.asp?cat1id=7&cat2id=0">无分类</a></li>
  267.   </ul>
  268.  </li>
  269. </ul>
  270. <ul>
  271.  <li><a href="category.asp?cat1id=8">测试类</a></li>
  272.  <li class="cat2">
  273.   <ul>
  274.    <li><a href="category.asp?cat1id=8&cat2id=0">无分类</a></li>
  275.   </ul>
  276.  </li>
  277. </ul>
  278. </div>
  279. aaaaaaaaaaaaaaaaa<div>oooo</div>
  280. aaaaaaaaaaaaaaaaa<div>oooo</div>
  281. aaaaaaaaaaaaaaaaa<div>oooo</div>
  282. aaaaaaaaaaaaaaaaa<div>oooo</div>
  283. aaaaaaaaaaaaaaaaa<div>oooo</div>
  284. aaaaaaaaaaaaaaaaa<div>oooo</div>
  285. aaaaaaaaaaaaaaaaa<div>oooo</div>
  286. </body>
  287. </html>
 
文章相关信息:
主题: 纯 CSS 弹出菜单 之 横排三级分类(兼容多个浏览器) By shawl.qiu
发表者: shawl.qiu
电子邮件: shawl.qiu@gmail.com
QQ: 908202921
MSN: btbtd@msn.com
Homepage: http://www.btbtd.org/
Blog: http://blog.csdn.net/btbtd/
发表日期: 2007-1-14 0:00:00
更新日期: 2007-1-14 0:00:00
来源引用: shawl.qiu CSharp DotNet 个人资料管理系统
引用本页: http://gi.2288.org/mod/article/display/Default.aspx?aid=17902
关闭
Google
搜索WWW
搜索www.btbtd.org
搜索blog.csdn.net
Powered by shawl.qiu © 2008-2010 the shawl.qiu Javascript Kits
Copyright © 2008-2010 by shawl.qiu