南瓜园

 找回密码
 注册
查看: 1826|回复: 1

兼容IE6,IE7,FF的一个下拉菜单

[复制链接]
发表于 2009-1-3 19:43:48 | 显示全部楼层 |阅读模式
  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>纯CSS的下拉菜单 支持IE6 IE7 Firefox -- 网站标准化</title>   
  6.    
  7. <style type="text/css">   
  8. *{margin:0;padding:0;}   
  9. .menu{font-size:12px;position:relative;z-index:100;}   
  10. .menu ul{list-style:none;}   
  11. .menu li {float:left;position:relative;}   
  12. .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}   
  13. .menu table {position:absolute; top:0; left:0;}   
  14. .menu ul li:hover ul,   
  15. .menu ul a:hover ul{visibility:visible;}   
  16. .menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   
  17. .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}   
  18. .menu ul ul{}   
  19. .menu ul ul li {clear:both;text-align:left;font-size:12px;}   
  20. .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}   
  21. .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   
  22. </style>   
  23. </head>   
  24.    
  25. <body>   
  26.    
  27. <div class="menu">   
  28.     <ul>   
  29.         <li><a href="">XHTML/CSS   
  30.             <!--[if IE 7]><!--></a><!--<![endif]-->   
  31.             <!--[if lte IE 6]><table><tr><td><![endif]-->   
  32.             <ul>   
  33.                 <li><a href="">标准</a></li>   
  34.                 <li><a href="">教程</a></li>   
  35.                 <li><a href="">技术文章</a></li>   
  36.                 <li><a href="">常见问题</a></li>   
  37.                 <li><a href="">布局教程专题</a></li>   
  38.                 <li><a href="">CSS菜单</a></li>   
  39.                 <li><a href="">浏览器兼容</a></li>   
  40.                 <li><a href="">滚动条相关</a></li>   
  41.                 <li><a href="">圆角矩形专题</a></li>   
  42.                 <li><a href="">CSS特效欣赏专题</a></li>   
  43.             </ul>   
  44.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
  45.         </li>   
  46.         <li><a href="">AJAX   
  47.             <!--[if IE 7]><!--></a><!--<![endif]-->   
  48.             <!--[if lte IE 6]><table><tr><td><![endif]-->   
  49.             <ul>   
  50.                 <li><a href="">AJAX教程</a></li>   
  51.                 <li><a href="">AJAX技术</a></li>   
  52.             </ul>   
  53.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
  54.         </li>   
  55.         <li><a href="">Javascript   
  56.             <!--[if IE 7]><!--></a><!--<![endif]-->   
  57.             <!--[if lte IE 6]><table><tr><td><![endif]-->   
  58.             <ul>   
  59.                 <li><a href="">JSON</a></li>   
  60.                 <li><a href="">技术文章</a></li>   
  61.             </ul>   
  62.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
  63.         </li>   
  64.         <li><a href="">DOM</a></li>   
  65.         <li><a href="">XML</a></li>   
  66.         <li><a href="">正则表达式   
  67.             <!--[if IE 7]><!--></a><!--<![endif]-->   
  68.             <!--[if lte IE 6]><table><tr><td><![endif]-->   
  69.             <ul>   
  70.                 <li><a href="">正则表达式简介</a></li>   
  71.                 <li><a href="">正则表达式之道</a></li>   
  72.             </ul>   
  73.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
  74.         </li>   
  75.         <li><a href="">网站优化</a></li>   
  76.         <li><a href="">电脑网络</a></li>   
  77.         <li><a href="">建站技术   
  78.             <!--[if IE 7]><!--></a><!--<![endif]-->   
  79.             <!--[if lte IE 6]><table><tr><td><![endif]-->   
  80.             <ul>   
  81.                 <li><a href="">PHP</a></li>   
  82.                 <li><a href="">ASP</a></li>   
  83.                 <li><a href="">ASP.NET</a></li>   
  84.                 <li><a href="">JSP</a></li>   
  85.                 <li><a href="">SQL</a></li>   
  86.                 <li><a href="">Flash</a></li>   
  87.                 <li><a href="">Dreamweaver</a></li>   
  88.             </ul>   
  89.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->   
  90.         </li>   
  91.     </ul>   
  92. </div>   
  93.    
  94. <br /><br />   
  95. </body>   
  96. </html>
复制代码
发表于 2009-9-23 16:20:10 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
您需要登录后才可以回帖 登录 | 注册

本版积分规则

请大家牢记南瓜园网址 www.nan2008.com

QQ|小黑屋|手机版|Archiver|南瓜园

GMT+8, 2024-12-28 06:10 , Processed in 0.083246 second(s), 20 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表