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

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

星期7, 2007年9月8日

Posted in category 实用代码

<!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

来自：懒人图库

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

You can leave a response, or trackback from your own site.