首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg王国
ACG玩家
当前位置：
网络学院首页
>>
设计教程
>>
web标准
>> 纯CSS制作支持IE6、IE7、Firefox的下拉菜单
纯CSS制作支持IE6、IE7、Firefox的下拉菜单
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源：
中国设计秀
作者：
点击：
133
加入收藏
点击下面的运行，可预览效果。
代码如下：
<!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:#fafafa;border-bottom:1px solid #fff;} </style> </head> <body> <div class="menu"> <ul> <li><a href="http://www.cnwebshow.com/">XHTML/CSS <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnwebshow.com/">标准</a></li> <li><a href="http://www.cnwebshow.com/">教程</a></li> <li><a href="http://www.cnwebshow.com/">技术文章</a></li> <li><a href="http://www.cnwebshow.com/">常见问题</a></li> <li><a href="http://www.cnwebshow.com/">布局教程专题</a></li> <li><a href="http://www.cnwebshow.com/">CSS菜单</a></li> <li><a href="http://www.cnwebshow.com/">浏览器兼容</a></li> <li><a href="http://www.cnwebshow.com/">滚动条相关</a></li> <li><a href="http://www.cnwebshow.com/">圆角矩形专题</a></li> <li><a href="http://www.cnwebshow.com/">CSS特效欣赏专题</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnwebshow.com/">07艺术 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnwebshow.com/">设计家园</a></li> <li><a href="http://www.cnwebshow.com/">设计家园</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnwebshow.com/">Javascript <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnwebshow.com/">JSON</a></li> <li><a href="http://www.cnwebshow.com/">技术文章</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnwebshow.com/">DOM</a></li> <li><a href="http://www.cnwebshow.com/">XML</a></li> <li><a href="http://www.cnwebshow.com/">正则表达式 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnwebshow.com/">正则表达式简介</a></li> <li><a href="http://www.cnwebshow.com/">正则表达式之道</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.cnwebshow.com/">网站优化</a></li> <li><a href="http://www.cnwebshow.com/">电脑网络</a></li> <li><a href="http://www.cnwebshow.com/">建站技术 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.cnwebshow.com/">HP</a></li> <li><a href="http://www.cnwebshow.com/">ASP</a></li> <li><a href="http://www.cnwebshow.com/">ASP.NET</a></li> <li><a href="http://www.cnwebshow.com/">JSP</a></li> <li><a href="http://www.cnwebshow.com/">SQL</a></li> <li><a href="http://www.cnwebshow.com/">Flash</a></li> <li><a href="http://www.cnwebshow.com/">Dreamweaver</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
用纯CSS制作的下拉菜单，并且支持IE6 IE7 Firefox
0
顶一下
2007-09-08 15:24:00 出处：
本文引用地址：
http://www.cnwebshow.com/edu/html/article_1346.html
热点文章/相关文章
·
CSS网页布局开发小技巧24则
·
web标准：CSS clear的属...
最新文章
·
CSS网页布局开发小技巧24则
·
web标准：CSS clear的属性及使...
·
CSS三栏布局中最先显示中栏的方法
·
网页设计中常用标签的使用位置
·
教你识别CSS中.和#,class的区别
·
web标准中浮动Float 概念详解
·
IE6隐藏样式表 让IE6去死
·
三种浏览器IE FireFox Opera支...
·
用Gnome HIG原则指导你的设计
·
WEB标准中元素水平居中方案总结
艺术设计秀最新图片
Karla Pamanes包装...
Charis插画艺术设...
希腊设计机构平面...
spd包装设计作品欣赏
FREYA个性插画设计...
德国平面大师乌韦...
推荐文章
·
web标准：CSS clear的属性及使...
·
CSS三栏布局中最先显示中栏的方法
·
网页设计中常用标签的使用位置
·
web标准中浮动Float 概念详解
·
WEB标准中元素水平居中方案总结
·
详解Css3中的属性选择符
·
xhtml+css制作不规则导航
·
div设计中的文字垂直居中的方法
·
IE双倍边距BUG的现象及解决办法
·
使文本保持在同一行中显示
素材下载
矢量
潮流素材
背景素材
模板
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我，秀出精彩！
中国设计秀，秀---无处不在！！
交流群：9107036 3848215 8850631
粤ICP备05067046号
