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

最新推荐文章于 2021-06-03 01:50:38 发布
原创 最新推荐文章于 2021-06-03 01:50:38 发布 · 251 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie #css #正则表达式 #border #xhtml #firefox

本文介绍了一种使用纯CSS实现的下拉菜单效果，该方案兼容IE6、IE7及Firefox等浏览器。通过巧妙地利用CSS伪类和条件注释实现了良好的交互体验，并针对不同版本的IE进行了适配。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”robots” content=”all” />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title> 
<style type=”text/css”> 
*{margin:0;padding:0;}  
.menu{font-size:12px;position:relative;z-index:100;}  
.menu ul{list-style:none;}  
.menu li {float:left;position:relative;}  
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}  
.menu table {position:absolute; top:0; left:0;}  
.menu ul li:hover ul,  
.menu ul a:hover ul{visibility:visible;}  
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}  
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}  
.menu ul ul{}  
.menu ul ul li {clear:both;text-align:left;font-size:12px;}  
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}  
.menu ul ul li a:hover{border:0;background:green;border-bottom:1px solid #fff;}  
</style> 
</head> 
 
<body> 
 
<div class=”menu”> 
          <ul> 
              <li><a href=”#”>XHTML/CSS  
                  <!–[if IE 7]><!–></a><!–<![endif]–> 
                  <!–[if lte IE 6]><table><tr><td><![endif]–> 
                  <ul> 
                      <li><a href=”#”>标准</a></li> 
                      <li><a href=”#”>教程</a></li> 
                      <li><a href=”#”>技术文章</a></li> 
                      <li><a href=”#”>常见问题</a></li> 
                      <li><a href=”#”>布局教程专题</a></li> 
                      <li><a href=”#”>CSS菜单</a></li> 
                      <li><a href=”#”>浏览器兼容</a></li> 
                      <li><a href=”#”>滚动条相关</a></li> 
                      <li><a href=”#”>圆角矩形专题</a></li> 
                      <li><a href=”#”>CSS特效欣赏专题</a></li> 
                  </ul> 
                  <!–[if lte IE 6]></td></tr></table></a><![endif]–> 
              </li> 
              <li><a href=”#”>07艺术
                  <!–[if IE 7]><!–></a><!–<![endif]–> 
                  <!–[if lte IE 6]><table><tr><td><![endif]–> 
                  <ul> 
                      <li><a href=”#”>网页教学网</a></li> 
                      <li><a href=”#”>网页教学网</a></li> 
                  </ul> 
                  <!–[if lte IE 6]></td></tr></table></a><![endif]–> 
              </li> 
              <li><a href=”#”>Javascript  
                  <!–[if IE 7]><!–></a><!–<![endif]–> 
                  <!–[if lte IE 6]><table><tr><td><![endif]–> 
                  <ul> 
                      <li><a href=”#”>JSON</a></li> 
                      <li><a href=”#”>技术文章</a></li> 
                  </ul> 
                  <!–[if lte IE 6]></td></tr></table></a><![endif]–> 
              </li> 
              <li><a href=”#”>DOM</a></li> 
              <li><a href=”#”>XML</a></li> 
              <li><a href=”#”>正则表达式  
                  <!–[if IE 7]><!–></a><!–<![endif]–> 
                  <!–[if lte IE 6]><table><tr><td><![endif]–> 
                  <ul> 
                      <li><a href=”#”>正则表达式简介</a></li> 
                      <li><a href=”#”>正则表达式之道</a></li> 
                  </ul> 
                  <!–[if lte IE 6]></td></tr></table></a><![endif]–> 
              </li> 
              <li><a href=”#”>网站优化</a></li> 
              <li><a href=”#”>电脑网络</a></li> 
              <li><a href=”#”>建站技术  
                  <!–[if IE 7]><!–></a><!–<![endif]–> 
                  <!–[if lte IE 6]><table><tr><td><![endif]–> 
                  <ul> 
                      <li><a href=”#”>HP</a></li> 
                      <li><a href=”#”>ASP</a></li> 
                      <li><a href=”#”>ASP.NET</a></li> 
                      <li><a href=”#”>JSP</a></li> 
                      <li><a href=”#”>SQL</a></li> 
                      <li><a href=”#”>Flash</a></li> 
                      <li><a href=”#”>Dreamweaver</a></li> 
                  </ul> 
                  <!–[if lte IE 6]></td></tr></table></a><![endif]–> 
              </li> 
          </ul> 
</div> 
</body> 
</html>

支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
然而，实现一个兼容多种浏览器的纯CSS下拉菜单，在过去一直是一个挑战，尤其是当需要支持老旧的浏览器，如Internet Explorer 6和7以及较早版本的Firefox时。但是，我们今天要讨论的下拉菜单，是完全使用CSS实现的，...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码
03-20
总的来说，创建一个兼容IE6、IE7和Firefox的纯CSS下拉菜单特效涉及到一系列的CSS技术，包括布局、定位、伪类选择器以及对不同浏览器特性的理解。这不仅是一项技术挑战，也是对前端开发者耐心和解决问题能力的考验。...
纯CSS的下拉菜单 支持IE6 IE7 Firefox,学习用
alian_1126的专栏
01-18 721
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /
一款纯CSS的下拉菜单 支持IE6 IE7 Firefox
02-27 170
点击(此处)折叠或打开 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"...
CSS的下拉菜单 支持IE6 IE7 Firefox
ZOLO 的专栏
09-27 830
                     CSS的下拉菜单 支持IE6 IE7 Firefox                *{margin:0;padding:0;}     .menu{font-size:12px;position:relative;z-index:100;}     .menu ul{list-style:none;}     .menu li {float:left;p
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
Tsurasa的专栏
08-04 787
纯CSS的下拉菜单 支持IE6 IE7 Firefox*{margin:0;padding:0;}.menu{font-size:12px;position:relative;z-index:100;}.menu ul{list-style:none;}.menu li {float:left;position:relative;}.menu ul ul {visibility:hidden;po
html div遮住下拉菜单,漂亮实用的div+css实现的下拉菜单 已通过IE、firefox测试
weixin_42323064的博客
06-03 521
html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，div+css实现的下拉菜单便大量被网页设计师使用。通过div+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。本文给大家推荐一个非常漂亮的div+css实现的下拉...
兼容IE6/7与Firefox的纯CSS下拉菜单实现
通过上述的解析，我们可以了解到构建一个支持老旧浏览器如IE6、IE7和现代浏览器如Firefox的纯CSS下拉菜单需要掌握的知识点。这些知识点涵盖了从基础的HTML结构设计到CSS布局和样式定义，再到对老旧浏览器的兼容性...
纯div+css下拉菜单支持ie6，ie7、火狐
06-01
首先，我们来看"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.htm"这个文件。这个文件展示了如何在不同浏览器，特别是老版本的Internet Explorer（如IE6和IE7）和Firefox中实现一致的下拉效果。IE6和IE7对CSS的支持...
解决DOJO提交乱码问题
12-25 579
 今天写项目用到AJAX异步提交评论，可不管怎么样评论内容始终都是乱码，数据库字段属性也改过了，提交方式也改成POST了，可还是不行，最后尝试修改成功。修改之前的代码片段： if("${user.userId}"==""){    alert("登陆后才能评分！");   }else if(data.length    alert("请正确评分和填写评论！");   }else{    v
用JavaScript实现网页图片等比例缩放
06-13 511
function resizeimg(ImgD,iwidth,iheight) {var image=new Image();image.src=ImgD.src;if(image.width>0 && image.height>0){if(image.width/image.height>= iwidth/iheight){if(image.width>iwidth){ImgD.width=iw
document.body.scrollTop 值总为0的解决方法
11-26 390
  document.body.scrollTop 值总为0的解决方法做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样：window.onscroll = function (){    var oFix = document.getElementById("divfix");    oFix.style
从request中获取上上个请求的url
11-30 356
在HTTP的request对象中,可以取到HTTP头HEADER,其中有一个是"Referer",通过它,我们可以知道上上个请求的URL,这在某些场合中相当有用. ­如在一个列表页中,通常会有一个删除链接,删除列表中的某项数据,如果希望删除成功后再返回到该列表页,可以如下做法: ­java 代码 ­­String retUrl = request.getHeader("Refe
解决动态数据下的锚点错位问题
12-23 317
 http://www.w3.org/1999/xhtml" >　　用 Javascript 实现锚点(Anchor)间平滑跳转　　　　// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转　　　　// 转换为数字　　function intval(v)　　{　　　　v = parseInt(v);　　　　return isNaN(v) ? 0 : v;　　}　　　// 获取元
两个Form 多选列表控件效果
12-03 312
 1：多选列表控件                                        content="很多人对 form 默认的多选列表效果不太满意，因为选中和未选中的项目是在一起的，当选项较多时问题尤为明显，本文介绍的就是将可选项和选中项分开，并且可以通过操作按钮或者双击来移动选项，操作起来非常方便。" />        Form 多选列表控件效果               
dojo.query的简单使用
12-23 310
  dojo.forEach(      dojo.query(".buydivrighttext_geb1"),  //获取所有该样式的控件      function(spantag){      spantag.className="buydivrighttext_geb";//将该控件的样式替换      }     );   dojo.forEach(      dojo.query("
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值