纯CSS制作支持IE6、IE7、Firefox的下拉菜单-新鲜人blog

E-mail Comment Del.icio.us Digg Reddit Technorati Furl

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

2007-9-8 实用代码

<!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.makewing.com/" _fcksavedurl="http://www.makewing.com/">XHTML/CSS</a><ul><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">标准</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">教程</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">技术文章</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">常见问题</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">布局教程专题</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">CSS菜单</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">浏览器兼容</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">滚动条相关</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">圆角矩形专题</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">CSS特效欣赏专题</a></li></ul></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">07艺术</a><ul><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">设计家园</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">设计家园</a></li></ul></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">Javascript</a><ul><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">JSON</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">技术文章</a></li></ul></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">DOM</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">XML</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">正则表达式</a><ul><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">正则表达式简介</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">正则表达式之道</a></li></ul></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">网站优化</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">电脑网络</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">建站技术</a><ul><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">HP</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">ASP</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">ASP.NET</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">JSP</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">SQL</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">Flash</a></li><li><a href="http://www.makewing.com/" _fcksavedurl="http://www.makewing.com/">Dreamweaver</a></li></ul></li></ul></div></body></html>

演示地址：http://www.htmlit.com.cn/jscx/纯CSS制作支持IE6、IE7、Firefox的下拉菜单.htm

用纯CSS制作的下拉菜单，并且支持IE6 IE7 Firefox

来自：懒人图库

This entry was posted on 2007年9月8日 at 22:14 and is filed under 实用代码. You can follow any responses to this entry through the RSS 2.0 feed. This article has been here

One Response to “纯CSS制作支持IE6、IE7、Firefox的下拉菜单”

Advertise Here

新鲜人blog

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

One Response to “纯CSS制作支持IE6、IE7、Firefox的下拉菜单”

Leave a Reply

分类

归档

ALIMAMA

链接

最新文章

其它