支持IE6 IE7 Firefox 的纯CSS的下拉菜单_经验交流

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <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:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;} .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;} .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:13px;margin:0;border:0;border-bottom:1px solid red;} .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;} </style> <div class="menu"> <ul> <li> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">XHTML/CSS </a> <ul> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">标准</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">教程</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">技术文章</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">常见问题</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">布局教程专题</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">CSS菜单</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">浏览器兼容</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">滚动条相关</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">圆角矩形专题</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">CSS特效欣赏专题</a></li> </ul> </li> <li> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">AJAX </a> <ul> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">AJAX教程</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">AJAX技术</a></li> </ul> </li> <li> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">Javascript </a> <ul> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">JSON</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">技术文章</a></li> </ul> </li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">DOM</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">XML</a></li> <li> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">正则表达式 </a> <ul> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">正则表达式简介</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">正则表达式之道</a></li> </ul> </li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">网站优化</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">电脑网络</a></li> <li> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">建站技术 </a> <ul> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">PHP</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">ASP</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">ASP.NET</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">JSP</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">SQL</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">Flash</a></li> <li><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow">Dreamweaver</a></li> </ul> </li> </ul> </div> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNu" target="_blank" rel="nofollow"> 2007-4-16</a> css drop down menu
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]