代码简介:作者的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