当前位置：主页 > 查看内容

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

发布时间：2021-04-15 00:00| 有位朋友查看

简介：纯CSS的下拉菜单支持IE6 IE7 Firefox XHTML/CSS 标准教程技术文章常见问题布局教程专题 CSS菜单浏览器兼容滚动条相关圆角矩形专题 CSS特效欣赏专题 AJAX AJAX教程 AJAX技术 Javascript JSON 技术文章 DOM XML 正则表达式正则表达式简介正则表达式……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" c /> <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox </title> <style type="text/css"> *{margin:0;padding:0;} .menu{font-size:12px;<a href='http://www.1330.cn/pos/' target='_blank'><u>pos</u></a>ition:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;<a href='http://www.1330.cn/pos/' target='_blank'><u>pos</u></a>ition: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:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;} .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:13px;margin:0;border:0;border-bottom:1px solid red;} .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;} </style> </head> <body> <div class="menu"> <ul> <li><a href="">XHTML/CSS </a>  <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>  </li> <li><a href="">AJAX </a>  <ul> <li><a href="">AJAX教程</a></li> <li><a href="">AJAX技术</a></li> </ul>  </li> <li><a href="">Javascript </a>  <ul> <li><a href="">JSON</a></li> <li><a href="">技术文章</a></li> </ul>  </li> <li><a href="">DOM</a></li> <li><a href="">XML</a></li> <li><a href="">正则表达式 </a>  <ul> <li><a href="">正则表达式简介</a></li> <li><a href="">正则表达式之道</a></li> </ul>  </li> <li><a href="">网站优化</a></li> <li><a href="">电脑网络</a></li> <li><a href="">建站技术 </a>  <ul> <li><a href="">PHP</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>  </li> </ul> </div>  <a href="https://www.jb51.net" target="_blank"> 2007-4-16</a> css drop down menu </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

本文转载自网络，原文链接：https://m.jb51.net/article/16666.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：firefox的超链接点击去除扩大的难看虚线的解决方法 下一篇：没有了

推荐图文



温州市

大前端

HTML5 body设置全屏背景图片的示例代码

大前端

网页制作绝对路径与相对路径的区别

大前端

有意境的说说带图片：走哪都想你，是我背着你干的最

大前端

QQ说说带图片：你用隐身来躲避我，我用隐身来成全你

大前端

前端页面弹框遮罩禁止页面滚动

大前端

周排行

月排行

总排行

1 html5跳转小程序wx-open-launch-weapp踩

2 学习小实例--滚动条的简单实现

3 百度站内搜索不支持https的解决方法(已测

4 Dreamweaver cs5怎么制作跳转菜单?

5 深入理解浏览器缓存机制

6 JDK/Dubbo/Spring 三种 SPI 机制，谁更好

7 智慧城市大数据运营中心 IOC 之 Web GIS

8 方正字库中英文、文件名对照表

9 详细分析css float 属性以及position:abs

10 经典动态规划：0-1 背包问题

1 html父子页面iframe双向发消息的实现示例

2 百度站内搜索不支持https的解决方法(已测

3 QQ说说带图片：你用隐身来躲避我，我用隐

4 WAP教程(8):WML 变量-XML/XSLT

5 html中table固定头部表格tbody可上下左右

6 Dreamweaver怎么添加边框? Dreamweaver边

7 有7年实战经验的前端主管带队经验分享

8 使用JavaScript学习设计模式

9 让https网站发送 referrer https 与 http

10 关于IE10以下的img标签问题解决

1 利用div+css3实现一个背景渐变的button按

2 讨论CSS中的各类居中方式

3 阿里云郝冲：阿里云边缘云，驱动行业新价

4 html列表框、文本域、文件域的示例代码

5 毕业说说带图片：我害怕的不是六月考试，

6 WAP教程(8):WML 变量-XML/XSLT

7 深入理解浏览器缓存机制

8 聊聊dddsample-core的model

9 kubernetes 降本增效标准指南| 资源利用

10 Dreamweaver怎么连接数据库? dw连接数据

随机推荐

网页设计与西方建筑的发展历程有何相似之

历史总是惊人的相似。西方建筑和网页设计同为工程与艺术的综合体，两者的发展历...

html实现a元素href的URL链接自动刷新或新

有时我们想实现这样一个功能，点击一个链接，如果这个链接浏览器已经打开过，则...

情感说说带图片：总有一个人，一直住在心

1．我不想和别人拥抱，因为那里没有你的心跳。 2．爱一个人什么感觉，你吸过毒吗...

Quill编辑器插入自定义HTML记录的示例详

转眼已经2020年，饥渴的人类不再满足于简单的文本，于是有了花里胡哨的携带各种...

Dreamweaver怎么连接数据库? dw连接数据

Dreamweaver在进行动态网页制作的时候（这里以asp网页为例进行介绍），需要调用...

推荐一个前端工程师做的超酷交互式网站

网站链接： http://strml.net/ 作者：Samuel Reed 小提示：经过昨天在朋友圈测试...

说说心情短语带图片：我爱你是真心话，告

1．失恋了一次，就好像突然明白了所有情歌的含义。 2．再华丽动听的网名，到最后...

前端html换肤功能的实现代码

50行代码换5种肤色，包含透明先把代码奉上，自取自用。直接创建html文件，直接...

详解html中表格table的行列合并问题解决

因为要做个网站，里面的内容除了大段文字之外，还有大量的表格，这就发现了表格...

每天学一个 Linux 命令（111）：mpstat

命令简介 mpstat（Multi-Processor Statistics）命令用于显示各个可用CPU的状态...

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

推荐图文

随机推荐

关于我们