CSS下拉菜单在IE6需要注意的问题

最新推荐文章于 2022-05-09 13:55:00 发布
最新推荐文章于 2022-05-09 13:55:00 发布
阅读量2.7k 收藏
点赞数
分类专栏： 程序语言 文章标签： ie css function 产品 firefox google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bluedoctor/article/details/3033930
版权
 最近看到一些利用CSS实现的下拉菜单，有的纯CSS在IE6下面实现不了下拉效果，经过很多次尝试，终于知道在IE6下面必须使用脚本。
下拉菜单的实现文件如下：
  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" lang="zh-CN"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>CSS下拉菜单演示</title> 
  6. <style type="text/css"> 
  7. <!-- 
  8. *{margin:0;padding:0;border:0;} 
  9. body { 
  10. font-family: arial, 宋体, serif; 
  11. font-size:12px; 
  12. } 
  13. #nav { 
  14. line-height: 24px; list-style-type: none; background:#666; 
  15. } 
  16. #nav a { 
  17. display: block; width: 80px; text-align:center; 
  18. } 
  19. #nav a:link { 
  20. color:#666; text-decoration:none; 
  21. } 
  22. #nav a:visited { 
  23. color:#666;text-decoration:none; 
  24. } 
  25. #nav a:hover { 
  26. color:#FFF;text-decoration:none;font-weight:bold; 
  27. } 
  28. #nav li { 
  29. float: left; width: 80px; background:#CCC; 
  30. } 
  31. #nav li a:hover{ 
  32. background:#999; 
  33. } 
  34. #nav li ul { 
  35. line-height: 27px; list-style-type: none;text-align:left; 
  36. left: -999em; width: 180px; position: absolute; 
  37. } 
  38. #nav li ul li{ 
  39. float: left; width: 180px; 
  40. background: #F6F6F6; 
  41. } 
  42. #nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px; 
  43. } 
  44. #nav li ul a:link { 
  45. color:#666; text-decoration:none; 
  46. } 
  47. #nav li ul a:visited { 
  48. color:#666;text-decoration:none; 
  49. } 
  50. #nav li ul a:hover { 
  51. color:#F3F3F3;text-decoration:none;font-weight:normal; 
  52. background:#C00; 
  53. } 
  54. #nav li:hover ul { 
  55. left: auto; 
  56. } 
  57. #nav li.sfhover ul { 
  58. left: auto; 
  59. } 
  60. #content { 
  61. clear: left; 
  62. } 
  63. --> 
  64. </style> 
  65. <script type=text/javascript> 
  66. <!--//--><![CDATA[//><!-- 
  67. function menuFix() { 
  68. var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
  69. for (var i=0; i<sfEls.length; i++) { 
  70. sfEls[i].οnmοuseοver=function() { 
  71. this.className+=(this.className.length>0? " ": "") + "sfhover"; 
  72. } 
  73. sfEls[i].onMouseDown=function() { 
  74. this.className+=(this.className.length>0? " ": "") + "sfhover"; 
  75. } 
  76. sfEls[i].onMouseUp=function() { 
  77. this.className+=(this.className.length>0? " ": "") + "sfhover"; 
  78. } 
  79. sfEls[i].οnmοuseοut=function() { 
  80. this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), 
  81. ""); 
  82. } 
  83. } 
  84. } 
  85. window.οnlοad=menuFix; 
  86. //--><!]]> 
  87. </script> 
  88. </head> 
  89. <body> 
  90. <ul id="nav"> 
  91. <li><a href="#">产品介绍</a> 
  92. <ul> 
  93. <li><a href="#">产品一</a></li> 
  94. <li><a href="#">产品一</a></li> 
  95. <li><a href="#">产品一</a></li> 
  96. <li><a href="#">产品一</a></li> 
  97. <li><a href="#">产品一</a></li> 
  98. <li><a href="#">产品一</a></li> 
  99. </ul> 
  100. </li> 
  101. <li><a href="#">服务介绍</a> 
  102. <ul> 
  103. <li><a href="#">服务二</a></li> 
  104. <li><a href="#">服务二</a></li> 
  105. <li><a href="#">服务二</a></li> 
  106. <li><a href="#">服务二服务二</a></li> 
  107. <li><a href="#">服务二服务二服务二</a></li> 
  108. <li><a href="#">服务二</a></li> 
  109. </ul> 
  110. </li> 
  111. <li><a href="#">成功案例</a> 
  112. <ul> 
  113. <li><a href="#">案例三</a></li> 
  114. <li><a href="#">案例</a></li> 
  115. <li><a href="#">案例三案例三</a></li> 
  116. <li><a href="#">案例三案例三案例三</a></li> 
  117. </ul> 
  118. </li> 
  119. <li><a href="#">关于我们</a> 
  120. <ul> 
  121. <li><a href="#">我们四</a></li> 
  122. <li><a href="#">我们四</a></li> 
  123. <li><a href="#">我们四</a></li> 
  124. <li><a href="#">我们四111</a></li> 
  125. </ul> 
  126. </li> 
  127. <li><a href="#">在线演示</a> 
  128. <ul> 
  129. <li><a href="#">演示</a></li> 
  130. <li><a href="#">演示</a></li> 
  131. <li><a href="#">演示</a></li> 
  132. <li><a href="#">演示演示演示</a></li> 
  133. <li><a href="#">演示演示演示</a></li> 
  134. <li><a href="#">演示演示</a></li> 
  135. <li><a href="#">演示演示演示</a></li> 
  136. <li><a href="#">演示演示演示演示演示</a></li> 
  137. </ul> 
  138. </li> 
  139. <li><a href="#">联系我们</a> 
  140. <ul> 
  141. <li><a href="#">联系联系联系联系联系</a></li> 
  142. <li><a href="#">联系联系联系</a></li> 
  143. <li><a href="#">联系</a></li> 
  144. <li><a href="#">联系联系</a></li> 
  145. <li><a href="#">联系联系</a></li> 
  146. <li><a href="#">联系联系联系</a></li> 
  147. <li><a href="#">联系联系联系</a></li> 
  148. </ul> 
  149. </li> 
  150. </ul> 
  151. </body> 
  152. </html>
可以兼容容IE6,IE7，经过测试，也可以在最新的FireFox，Google浏览器实现。
我的浏览器是 IE7，去掉JS脚本也可以实现，而且FireFox，Google 都可以，但就是IE6不行。没办法，为了兼容，还是把那段JS加上了。


bluedoctor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3动画下拉菜单,用css3实现动画下拉菜单效果的实现步骤
weixin_36276359的博客
08-04 1872
我们知道，使用CSS3做出来的下拉菜单是不兼容IE6的，而IE8和以下也就不支持一些CSS3的属性了，比如opacity、transition等。这次就来给大家说一下用css3实现动画下拉菜单效果的实现步骤。site-navigation ul ul{min-width: 100px; position: absolute; left:0; top:100%; visibility: hidden...
html下拉菜单隐藏属性,css修改selec下拉菜单样式
weixin_35000379的博客
06-03 843
css修改selec下拉菜单样式2018-01-19 15:00修改select下拉菜单样式其实可以使用javascript来操作，这样更方便。但有些人并不喜欢，想用单纯的css来控制。以下有三种解决方案，看看哪一个合适。解决方案1 外观：无 - 与ie10-11解决方法要隐藏appearance: none选择元素上设置的默认箭头，请添加您自己的自定义箭头background-imagesele...
html中的下拉菜单栏,CSS下拉菜单
weixin_29340327的博客
06-03 631
CSS下拉菜单随着时代的发展，网站的内容也变得越来越丰富，当结构比较复杂的时候，一级导航的菜单就不再够用了，这时我们就需要多级菜单来实现层次结构。下面我们就来讲一下有关下拉菜单的相关内容。现在我们介绍一组HTML标记——dl、dt和dd。这组标记和ul、li非常相似，也用于列表结构。dl被称为“定义列表”，在使用方法上相当于ul；dt和dd分别定义为“定义标题”和“定义描述”，它们在使用方法上相当...
css基础 CSS 导航栏、CSS 下拉菜单
wgchen
04-27 4517
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割线固定导航条源码示例 1CSS 下拉菜单基本下拉菜单实例解析下拉菜单 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用
css下拉菜单汇总案例
qq_46664185的博客
10-27 451
1.基础的下拉菜单 将鼠标移到元素上时出现的下拉框。效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
纯css滑动效果下拉菜单
xsijisw21的博客
05-09 358
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
css用div二级下拉菜单,div+css下拉二级菜单
weixin_35408656的博客
08-04 562
纯CSS菜单body{font-family:"新宋体"; margin:0;}/* 设置全页面的字体和页边距*/.nav{width:720px; margin:0 auto 0 auto;}/*设置DIV的宽和居中*/.nav li li a {display:inline-block;}/*是处理 IE - BUG 的*/.nav li li a {display:block;}.nav u...
css实现导航菜单下拉效果
热门推荐
learn_yang的博客
06-13 5万+
通过css也可以实现简单的导航栏效果，一些不会写js的下伙伴不用担心了。先上HTML部分 &lt;nav&gt; &lt;ul class="level"&gt; &lt;li&gt;&lt;a href=""&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;
html div遮住下拉菜单,漂亮实用的div+css实现的下拉菜单 已通过IE、firefox测试
weixin_42323064的博客
06-03 461
html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，div+css实现的下拉菜单便大量被网页设计师使用。通过div+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。本文给大家推荐一个非常漂亮的div+css实现的下拉...
CSS横向下拉菜单(兼容IE6)
12-13
CSS驱动的横向下拉菜单（改进版） 由于我的IE是IE7的，所以起初没有意识到那个下拉菜单在IE6中不能显示，今天刚把IE7卸了装了IE6，一般的，由于CSS驱动的下拉菜单不能在IE6中正常工作，大多数人会选择用JavaScript去...
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
10-30
在创建纵向下拉菜单时，我们需要考虑IE6和IE7浏览器的兼容性问题。这两个浏览器版本存在一些 BUG 和不兼容的问题，需要我们使用特殊的方法来解决。 在本例中，我们使用了 conditional comment 语句来解决IE6和IE7...
纯css多级下拉菜单兼容ie6+主流浏览器
04-28
在创建兼容IE6+的多级下拉菜单时，我们需要考虑以下关键知识点： 1. **CSS盒模型**：理解盒模型是至关重要的，因为它决定了元素的尺寸计算方式。IE6遵循自己的盒模型（IE盒模型），而其他现代浏览器遵循W3C盒模型。...
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
然而，实现一个兼容多种浏览器的纯CSS下拉菜单，在过去一直是一个挑战，尤其是当需要支持老旧的浏览器，如Internet Explorer 6和7以及较早版本的Firefox时。但是，我们今天要讨论的下拉菜单，是完全使用CSS实现的，...
函数式语言的优美：不用循环，不用递归，输出1...100的数
深蓝的智慧，医生的严谨
07-10 3080
不用循环，不用递归，输出1...100的数，这是一个最近很热门的话题，有很多人支持直接手写100条输出语句，大多数人支持使用递归，但是如果不允许使用递归，还有别的方式吗？毕竟，递归也是一种循环。其实，使用函数式语言，可以轻松做到：不用循环，也不用递归，输出1。。。100之间的数。下面是测试代码（看Html源码）： var F=function(x){document.wri
由几道面试题谈到的计算机技术闲话
深蓝的智慧，医生的严谨
07-02 2264
[转]下面是我们今天在网上闲聊的一些 由几道面试题谈到的计算机技术闲话，文中的名字不是真名，请勿对号入座。zp. 2009-07-02 12:11:511、    RadioButton 如何构成一组的形式？2、    为使界面布局可以随窗体大小调整而调整，控件如何定位？3、    窗体间传值有哪几种方式？4、    窗体的Load事件与Page的Load事件有
Java&.Net互操作技术介绍
深蓝的智慧，医生的严谨
08-19 2022
现在.NET和Java各自占据了企业级用户市场的半壁江山，选择一种技术平台就意味着丢弃了一半市场；所以，大的企业就选择了“双管其下”，为同一个产品做两个不同的版本，运行在不同的平台上，而小公司就要求开发人员都是全能人才，级精通Java又精通.NET，但这样做却带来了高昂的成本问题。 本文试图解决这个问题，实际上解决方案早就存在，让我们去看看吧！
N年后有多少只兔子的问题
深蓝的智慧，医生的严谨
09-19 1637
今天在博客园看到一个题目， C# 算兔子的算法　要求用递归，面试题 为简单，我用JS写了一个求解，没有使用递归，先说下题目： 一对小兔子一年后长成大兔子；一对大兔子每半年生一对小兔子。大兔子的繁殖期为4年，兔子的寿命是6年。假定第一年年初投放了一对小兔子，试编程计算，第n年
为什么教小学生x=x+1是错误的？浅议少儿编程教育的误区。
深蓝的智慧，医生的严谨
05-17 1445
对程序员而言，类似x=x+1的代码是再常见不过的了，几乎所有常见的编程语言教程在开始初级教程的时候，都会拿这个问题的计算来做示例，比如对于C#，会像下面这样的代码： int x=0; x=x+1; 也可以这样写： x+=1; 也可以像C语言那样，这样写更简单： int x=0; x++; ++x; 其它编程语言都大同小异了，程序员朋友们都知道上面的代码无非就是将变量x的值增加了1，或者说为变量x赋了一个比它原来大1的新数值。但是，如果你打算把这行代码告诉一个小学生，...
CSS实现下拉菜单的深度探索与兼容性解析
CSS下拉菜单在现代浏览器中一般能良好运行，但考虑到IE6等较旧的浏览器，可能需要一些额外的技巧。例如，IE6不支持`:hover`伪类应用于非链接元素（如`<li>`），这时可以通过JavaScript或者添加`*html`前缀的CSS hack...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值