纯CSS的下拉菜单 支持IE6 IE7 Firefox

最新推荐文章于 2015-09-28 15:44:19 发布
最新推荐文章于 2015-09-28 15:44:19 发布
阅读量636 收藏
点赞数
分类专栏： javascript代码下载 文章标签： ie css firefox 正则表达式 dreamweaver border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ucshng/article/details/1614326
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <!-- www.div-css.com 网站标准化  2007-4-16 -->  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化</title>  
  7.   
  8. <style type="text/css">  
  9. *{margin:0;padding:0;}   
  10. .menu{font-size:12px;position:relative;z-index:100;}   
  11. .menu ul{list-style:none;}   
  12. .menu li {float:left;position:relative;}   
  13. .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}   
  14. .menu table {position:absolute; top:0; left:0;}   
  15. .menu ul li:hover ul,   
  16. .menu ul a:hover ul{visibility:visible;}   
  17. .menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   
  18. .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}   
  19. .menu ul ul{}   
  20. .menu ul ul li {clear:both;text-align:left;font-size:12px;}   
  21. .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}   
  22. .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   
  23. </style>  
  24. </head>  
  25.   
  26. <body>  
  27.   
  28. <div class="menu">  
  29.     <ul>  
  30.         <li><a href="">XHTML/CSS   
  31.             <!--[if IE 7]><!--></a><!--<![endif]-->  
  32.             <!--[if lte IE 6]><table><tr><td><![endif]-->  
  33.             <ul>  
  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="">布局教程专题</a></li>  
  39.                 <li><a href="">CSS菜单</a></li>  
  40.                 <li><a href="">浏览器兼容</a></li>  
  41.                 <li><a href="">滚动条相关</a></li>  
  42.                 <li><a href="">圆角矩形专题</a></li>  
  43.                 <li><a href="">CSS特效欣赏专题</a></li>  
  44.             </ul>  
  45.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  46.         </li>  
  47.         <li><a href="">AJAX   
  48.             <!--[if IE 7]><!--></a><!--<![endif]-->  
  49.             <!--[if lte IE 6]><table><tr><td><![endif]-->  
  50.             <ul>  
  51.                 <li><a href="">AJAX教程</a></li>  
  52.                 <li><a href="">AJAX技术</a></li>  
  53.             </ul>  
  54.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  55.         </li>  
  56.         <li><a href="">Javascript   
  57.             <!--[if IE 7]><!--></a><!--<![endif]-->  
  58.             <!--[if lte IE 6]><table><tr><td><![endif]-->  
  59.             <ul>  
  60.                 <li><a href="">JSON</a></li>  
  61.                 <li><a href="">技术文章</a></li>  
  62.             </ul>  
  63.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  64.         </li>  
  65.         <li><a href="">DOM</a></li>  
  66.         <li><a href="">XML</a></li>  
  67.         <li><a href="">正则表达式   
  68.             <!--[if IE 7]><!--></a><!--<![endif]-->  
  69.             <!--[if lte IE 6]><table><tr><td><![endif]-->  
  70.             <ul>  
  71.                 <li><a href="">正则表达式简介</a></li>  
  72.                 <li><a href="">正则表达式之道</a></li>  
  73.             </ul>  
  74.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  75.         </li>  
  76.         <li><a href="">网站优化</a></li>  
  77.         <li><a href="">电脑网络</a></li>  
  78.         <li><a href="">建站技术   
  79.             <!--[if IE 7]><!--></a><!--<![endif]-->  
  80.             <!--[if lte IE 6]><table><tr><td><![endif]-->  
  81.             <ul>  
  82.                 <li><a href="">PHP</a></li>  
  83.                 <li><a href="">ASP</a></li>  
  84.                 <li><a href="">ASP.NET</a></li>  
  85.                 <li><a href="">JSP</a></li>  
  86.                 <li><a href="">SQL</a></li>  
  87.                 <li><a href="">Flash</a></li>  
  88.                 <li><a href="">Dreamweaver</a></li>  
  89.             </ul>  
  90.             <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  91.         </li>  
  92.     </ul>  
  93. </div>  
  94.   
  95. <br /><br />  
  96. <a href="http://www.div-css.com" target="_blank">www.div-css.com 网站标准化  2007-4-16</a>  
  97. css drop down menu   
  98. </body>  
  99. </html>  
 
 
ucshng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
完美兼容IE6IE7下拉项导航
11-12
无需JS 兼容IE6 纯CSS的下拉菜单 支持IE6 IE7 Firefox等主流浏览器
兼容ie6css怎么设置,CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
weixin_35587674的博客
08-03 340
网页布局设计技术迄今为止主要有：table表格布局，DIV+CSS布局以及层布局。目前的网页布局设计领域主流是以DIV+CSS布局为主，table表格布局和层布局为辅。另外我还要告诉你一个秘密，那就是以DIV+CSS技术设计的网页是很招搜索引擎喜欢的哦！呵呵！先说正经的吧！一、!important 兼容IE6因为IE7及其以上版本对!important的支持， 所以!important 方法就可以...
二级下拉菜单(支持IE6)
01-05
二级下拉菜单(支持IE6)，需要一个js文件
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
纯CSS的下拉菜单 支持IE6 IE7 Firefox 不用js兼容性好
纯div+css下拉菜单支持ie6，ie7、火狐
06-01
收集的几个纯div+css下拉菜单或是带二级栏目的导航吧，支持ie6、ie7、火狐等浏览器。
纯css多级下拉菜单兼容ie6+主流浏览器
04-28
兼容ie6、ie7、ie8、ie9、Chrome、Firefox等主流浏览器，轻量简洁容易上手使用，是web开发、学习的必备之选。
纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码
03-20
纯CSS的下拉菜单,支持IE6,IE7,Firefox
10-16
纯CSS的下拉菜单 支持IE6,IE7,Firefox
IE7 下拉菜单兼容问题及二级菜单 简单Js代码
非专业前端
09-26 618
做二级下拉菜单，在IE7下发现有时鼠标移上去 二级菜单会直接收回，这时候给 二级的加个背景颜色就会解决了！ 贴一下 var $nav=$('.nav').find('li').has('.secNav'); $nav.mouseenter(function(){ $(this).children('.secNav').stop(1,1).show(); }).mousel
【CSS】兼容IE6的卡片式布局
编程记录，亲测有效
09-28 3372
如下图： 这种高大上的布局看起来仿佛只有那些前端框架，而且要考虑很多东西才能够弄出来。 其实不然，完全可以自己手写几句简单的CSS就能够弄出来了。根本无需理会那些动不动就摆大牌说不兼容IE6就不兼容IE6的前端框架。 先上代码再讲解。上图的代码如下： 卡片式布局 body{ background:#eeeee
div+css打造兼容ie6的tab样式
湛庐无方
12-30 1657
记得先引用JQ框架   CSS部分 html{ font:normal 12px/24px "宋体"; overflow-x:hidden;} body{ margin:0; padding:0;} img{ border:nonel;} ul,li,ol{ list-style:none; padding:0; margin:0;} .menu{ border:1px solid #ccc
IE7 自动弹出下拉菜单错误
xujianrj的专栏
01-16 1387
1.重装IE7 2.“运行”输入cmd ，执行for %1 in (%windir%/system32/*.dll) do regsvr32.exe /s %1 3.管理IE 加载项，找到可疑项并禁用（如当前状况无法使用ie7，可以使用mathon等浏览器管理IE加载项）
明天你来自己做外挂
~缘份天空~
06-07 5319
  随着网络游戏的日益火爆，很多玩家都投身到游戏中。目前很多玩家都依赖于一些游戏的外挂程序来进行游戏。那么做一个游戏的外挂程序是否是一件很困难的事呢？回答是"否"，诚然编写一些程序是需要一些基本知识的，所以我们想以最简单的语言来给你讲授编写外挂程序的一些技巧，一些方法，并提供给你一些基本的辅助工具，即使你是一个菜鸟，看了我们的教程，并技巧地使用我们提供给你的工具，你完全能够编写出一个完全属于你自己
网页中加入下雨的效果背景特效
~缘份天空~
05-15 2806
var no = 50;var speed = 1;var ns4up = (document.layers) ? 1 : 0;var ie4up = (document.all) ? 1 : 0;var s, x, y, sn, cs;var a, r, cx, cy;var i, doc_width = 800, doc_height = 600;if (ns4up) {doc_width =
时间日期代码
~缘份天空~
05-15 2542
function www_helpor_net(){var Digital=new Date()var hours=Digital.getHours()var minutes=Digital.getMinutes()var seconds=Digital.getSeconds()if(minutesminutes="0"+minutesif(secondsseconds="0"+seconds
html下拉折叠菜单,纯CSS实现折叠菜单下拉菜单
最新发布
05-27
好的，我可以为您介绍如何实现纯CSS的下拉折叠菜单。 首先，我们需要一个基础的HTML结构，如下所示： ```html 折叠菜单 下拉菜单项1 下拉菜单项2 下拉菜单项3 ``` 接下来，我们需要利用CSS来实现下拉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值