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

最新推荐文章于 2024-10-15 20:19:31 发布
最新推荐文章于 2024-10-15 20:19:31 发布
阅读量411 收藏
点赞数
文章标签： ie css 正则表达式 ajax javascript firefox
  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  4. <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>   
  5.    
  6. <style type="text/css">   
  7. *{margin:0;padding:0;}
  8. .menu{
  9.   font-size:12px;
  10.   position:relative;
  11.   z-index:100;
  12.   width: 150px;
  13.   border: 1px solid #CCCCCC;
  14. }
  15. .menu ul{
  16.   list-style:none;
  17.   padding: 5px;
  18. }
  19. .menu li {
  20.   position:relative;
  21.   width: 150px;
  22. }/*这里可以调整li的横竖状态*/
  23. .menu table {position:absolute; top:0; left:0;}
  24. .menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}
  25. .menu a{
  26.   display:block;
  27.   color:#333333;
  28.   text-decoration:none;
  29.   padding-top: 5px;
  30.   padding-bottom: 5px;
  31.   padding-left: 10px;
  32.   border-bottom-width: 1px;
  33.   border-bottom-style: solid;
  34.   border-bottom-color: #333333;
  35. }
  36. .menu a:hover{
  37.   color:#f00;
  38.   border-bottom-width: 1px;
  39.   border-bottom-style: solid;
  40.   border-bottom-color: #FF0000;
  41.   font-size: 14px;
  42. }
  43. .menu ul ul{
  44.   border: 1px solid #333333;
  45.   left: 150px;
  46.   position: absolute;
  47.   visibility: hidden;
  48.   top: 0px;
  49.   background-color: #FFFFFF;
  50. }
  51. .menu ul ul li {clear:both;text-align:left;font-size:12px;}
  52. .menu ul ul li a{
  53.   display:block;
  54.   width:auto;
  55.   height:13px;
  56.   margin:0;
  57. }
  58. .menu ul ul li a:hover{
  59.   border-top-width: 0;
  60.   border-right-width: 0;
  61.   border-bottom-width: 1px;
  62.   border-left-width: 0;
  63.   border-bottom-style: solid;
  64.   border-bottom-color: #FF0000;
  65. }
  66. </style>   
  67. </head>
  68. <body>
  69. <div class="menu">
  70.   <ul>
  71.     <li><a href="">XHTML/CSS
  72.     <!--[if IE 7]><!--></a><!--<![endif]-->
  73.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  74.       <ul>
  75.         <li><a href="">标准</a></li>
  76.         <li><a href="">教程</a></li>
  77.         <li><a href="">技术文章</a></li>
  78.         <li><a href="">常见问题</a></li>
  79.         <li><a href="">布局教程专题</a></li>
  80.         <li><a href="">CSS菜单</a></li>
  81.         <li><a href="">浏览器兼容</a></li>
  82.         <li><a href="">滚动条相关</a></li>
  83.         <li><a href="">圆角矩形专题</a></li>
  84.         <li><a href="">CSS特效欣赏专题</a></li>
  85.       </ul>
  86.       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  87.     </li>
  88.     <li><a href="">AJAX
  89.     <!--[if IE 7]><!--></a><!--<![endif]-->
  90.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  91.       <ul>
  92.         <li><a href="">AJAX教程</a></li>
  93.         <li><a href="">AJAX技术</a></li>
  94.       </ul>
  95.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  96.     </li>
  97.     <li><a href="">Javascript
  98.     <!--[if IE 7]><!--></a><!--<![endif]-->
  99.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  100.       <ul>
  101.         <li><a href="">JSON</a></li>
  102.         <li><a href="">技术文章</a></li>
  103.       </ul>
  104.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  105.     </li>
  106.     <li><a href="">DOM
  107.   <!--[if IE 7]><!--></a><!--<![endif]-->
  108.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  109.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  110.   </li>
  111.     <li><a href="">XML
  112.   <!--[if IE 7]><!--></a><!--<![endif]-->
  113.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  114.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  115.   </li>
  116.     <li><a href="">正则表达式
  117.     <!--[if IE 7]><!--></a><!--<![endif]-->
  118.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  119.       <ul>
  120.         <li><a href="">正则表达式简介</a></li>
  121.         <li><a href="">正则表达式之道</a></li>
  122.       </ul>
  123.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  124.     </li>
  125.     <li><a href="">网站优化
  126.   <!--[if IE 7]><!--></a><!--<![endif]-->
  127.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  128.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  129.   </li>
  130.     <li><a href="">电脑网络
  131.   <!--[if IE 7]><!--></a><!--<![endif]-->
  132.   <!--[if lte IE 6]><table><tr><td><![endif]-->
  133.   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  134.   </li>
  135.     <li><a href="">建站技术
  136.     <!--[if IE 7]><!--></a><!--<![endif]-->
  137.     <!--[if lte IE 6]><table><tr><td><![endif]-->
  138.       <ul>
  139.         <li><a href="">PHP</a></li>
  140.         <li><a href="">ASP</a></li>
  141.         <li><a href="">ASP.NET</a></li>
  142.         <li><a href="">JSP</a></li>
  143.         <li><a href="">SQL</a></li>
  144.         <li><a href="">Flash</a></li>
  145.         <li><a href="">Dreamweaver</a></li>
  146.       </ul>
  147.     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  148.     </li>
  149.   </ul>
  150. </div>
  151. </body>   
  152. </html>
tbxiong
关注
支持FF、IE6下很实用的三级下拉菜单
02-24
支持FF、IE6下面很实用的三级下拉菜单
二级下拉菜单(支持IE6)
01-05
二级下拉菜单(支持IE6)，需要一个js文件
下拉菜单的制作
weixin_30325071的博客
10-10 84
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单的制作</title></head><style type="text/css">#menu{margin:0;pa...
dropMenuw.htm
shixinbao的专栏
05-27 633
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    www.div-css.com 网站标准化  2007-4-16 -->  我的页面title      *{margin:0;padding:0;}   .menu{font-size:12px;position:relative;z-index:100;}   .me
jquery实现下拉框多选（支持IE7）
02-13
jquery 实现下拉框多选方法 ,引入 easyui框架 ，支持IE7版本，360
纯CSS的下拉菜单 支持IE6 IE7 Firefox,学习用
alian_1126的专栏
01-18 693
<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 /
支持IE6 IE7 Firefox 的纯CSS的下拉菜单
10-30
然而，实现一个兼容多种浏览器的纯CSS下拉菜单，在过去一直是一个挑战，尤其是当需要支持老旧的浏览器，如Internet Explorer 6和7以及较早版本的Firefox时。但是，我们今天要讨论的下拉菜单，是完全使用CSS实现的，...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单特效代码
03-20
总的来说，创建一个兼容IE6、IE7和Firefox的纯CSS下拉菜单特效涉及到一系列的CSS技术，包括布局、定位、伪类选择器以及对不同浏览器特性的理解。这不仅是一项技术挑战，也是对前端开发者耐心和解决问题能力的考验。...
纯div+css下拉菜单支持ie6，ie7、火狐
06-01
首先，我们来看"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.htm"这个文件。这个文件展示了如何在不同浏览器，特别是老版本的Internet Explorer（如IE6和IE7）和Firefox中实现一致的下拉效果。IE6和IE7对CSS的支持...
纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar
07-04
本资源"纯CSS制作支持IE6、IE7、Firefox的下拉菜单.rar"提供了一种使用纯CSS实现的跨浏览器下拉菜单解决方案，特别兼容了对老旧浏览器如Internet Explorer 6和7的支持，同时也适用于Firefox等现代浏览器。...
纯CSS的下拉菜单,支持IE6,IE7,Firefox
10-16
通过以上步骤，我们可以创建一个兼容IE6、IE7和Firefox的纯CSS下拉菜单。尽管IE6和IE7的兼容性限制了部分CSS3特性的使用，但仍然可以通过一些技巧来实现类似的效果，确保了在旧版浏览器中的良好表现。在实际项目中，...
兼容IE6/IE7/IE8/火狐---下拉菜单s…
thewebcode
07-03 88
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
Tsurasa的专栏
08-04 738
纯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
【CSS】扁平化，支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏
编程记录，亲测有效
01-05 2093
上次在《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》（点击打开链接）给大家推荐过导航栏怎么写， 这次不用任何框架，纯手写CSS，原生态，方便各位改写！请笑纳。 一、首先是含有方块超级链接的导航栏，如下图： 这个东西个人觉得拼接在一些灰色巨幕下面做首页的导航栏不错 或者放在一些标签页上面也是可以的 代码如下： 按钮1 按钮2 首先你要定义一个大div
自如网租房价格反爬 CSS偏移
qq_44990881的博客
10-08 492
【代码】自如网租房价格反爬 CSS偏移。
CSS——文字打字机效果
懒羊羊大王的博客
10-06 1892
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
【网页设计】CSS 盒子模型
最新发布
Akiiiira的博客
10-15 615
1. 布局为啥用不同盒子,我只想用div？标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p2. 为啥用辣么多类名？类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。3. 到底用 margin 还是 padding？大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。4. 自己做没有思路？布局有很多种实现方式，同学们可以开始先模仿老师的写法，然后再做出自己的风格。
纯CSS实现的三级下拉菜单代码示例
这个资源提供了一个纯CSS实现的三级下拉菜单的代码示例，适用于非IE浏览器（如Firefox, Chrome, Safari等）。下面将详细解释这段代码的工作原理和关键CSS样式。 首先，我们看到HTML结构，主要由`<ul>`和`<li>`元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值