首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 自己做的相当简单的无限级菜单，但有个BUg,希望大家共同看下

自己做的相当简单的无限级菜单，但有个BUg,希望大家共同看下

时间：2009-07-30

来源：互联网

自己做的相当简单的无限级菜单，但有个BUg,就是在IE下，点的时候不停的闪，希望大家共同看下
由于没有找到在线的JQUERY，考下来在自己的机上看下
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  7. <style type="text/css">
  8. *{margin:0;padding:0}
  9. body{margin-top:30px;}
  10. #dd{clear:both;background:#987;}
  11. #dd .top1{float:left;background:#fff;width:100px;}
  12. #dd ul{list-style:none;margin:0;padding:0;}
  13. #dd ul ul{ position:absolute;background:#999;z-index:1;}
  14. #dd ul ul ul{left:100px;top:0;list-style:none;z-index:2;}
  15. #dd ul ul li{position:relative;width:100px;*float:left;}
  16. #dd li{}
  17. #dd li a{display:block;text-decoration:none;border:1px solid #567;height:20px;line-height:20px;}
  18. #dd li a:hover{background:#b6bdd2;border:1px solid #0a246a;text-decoration:none;}
  19. .block{display:block;}
  20. .hide{display:none;}
  21. </style>
  22. <script type="text/javascript">
  23. </script>
  24. </head>
  25. <body>
  26. <div id="dd">
  27.     <ul>
  28.         <li class="top1" ><a href="#">home</a>
  29.             <ul>
  30.                 <li><a href="#">home1</a>
  31.                     <ul>
  32.                         <li><a href="#">home1-1</a>
  33.                             <ul>
  34.                                 <li><a href="#">home1-1_1</a></li>
  35.                                 <li><a href="#">home1-1_2</a></li>
  36.                             </ul>
  37.                         </li>
  38.                         <li><a href="#">home1-2</a></li>
  39.                         <li><a href="#">home1-3</a>
  40.                             
  41.                         </li>
  42.                         <li><a href="#">home1-4</a></li>
  43.                     </ul>
  44.                 </li>
  45.                 <li><a href="#">home2</a></li>
  46.                 <li><a href="#">home3</a></li>
  47.             </ul>
  48.         </li>
  49.         <li class="top1"><a href="#">dhtml</a>
  50.             <ul>
  51.                 <li><a href="#">dhtml1</a></li>
  52.                 <li><a href="#">dhtml2</a></li>
  53.                 <li><a href="#">dhtml3</a></li>
  54.             </ul>
  55.         </li>
  56.         <li class="top1"><a href="#">dd</a>
  57.             <ul>
  58.                 <li><a href="#">dd1</a></li>
  59.                 <li><a href="#">dd2</a></li>
  60.                 <li><a href="#">dd3</a></li>
  61.             </ul>
  62.         </li>
  63.     </ul>
  64. </div>
  65. <br />
  66. <div id="tt">ffffffffffff</div>
  67. <script type="text/javascript">
  68. $('#dd .top1 ul').hide();
  69. $('#dd .top1').each(function(){
  70.     $(this).mouseover(function(){
  71.         $('ul:eq(0)',this).show();
  72.     }).mouseout(function(){
  73.         $('ul:eq(0)',this).hide();
  74.     });
  75.     $('li',this).each(function(){
  76.         
  77.         $(this).mouseover(function(){
  78.             $('ul:eq(0)',this).show();
  79.         }).mouseout(function(){
  80.             $('ul:eq(0)',this).hide();
  81.         });
  82.     });
  83. });
  84. </script>
  85. </body>
  86. </html>

作者: xiongzhixian   发布时间: 2009-07-30

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net