兼容FF,IE的纯CSS下拉菜单

最新推荐文章于 2021-07-09 15:24:00 发布

转载最新推荐文章于 2021-07-09 15:24:00 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webdm/archive/2011/06/08/2074837.html

本文提供了一个兼容Firefox和Internet Explorer的纯CSS下拉菜单代码示例。该菜单使用了:hover伪类来实现展开效果，并通过特定条件注释为IE6及以下版本提供了兼容方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码简介：作者的CSS水平不错啊，值得我们学习，少了JS，就是好看多。

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>兼容FF,IE的纯CSS下拉菜单_网页代码站(www.webdm.cn)</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="/">XHTML/CSS 
<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="/">标准</a></li> 
<li><a href="/">教程</a></li> 
<li><a href="/">技术文章</a></li> 
<li><a href="/">常见问题</a></li> 
<li><a href="http://www.webdm.cn/">布局教程专题</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> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="http://www.webdm.cn/">07艺术
<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="http://www.webdm.cn/">设计家园</a></li> 
<li><a href="/">设计家园</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="/">Javascript 
<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="/">JSON</a></li> 
<li><a href="/">技术文章</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="/">DOM</a></li> 
<li><a href="/">XML</a></li> 
<li><a href="/">正则表达式 
<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="/">正则表达式简介</a></li> 
<li><a href="/">正则表达式之道</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="/">网站优化</a></li> 
<li><a href="/">电脑网络</a></li> 
<li><a href="/">建站技术 
<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="/">HP</a></li> 
<li><a href="/">ASP</a></li> 
<li><a href="/">ASP.NET</a></li> 
<li><a href="http://www.webdm.cn/">JSP</a></li> 
<li><a href="/">SQL</a></li> 
<li><a href="/">Flash</a></li> 
<li><a href="/">Dreamweaver</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul> 
</div> 
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/cefea0cc-ffc0-4bfd-a44b-57eec600e51d.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/08/2074837.html