zoukankan      html  css  js  c++  java
  • 兼容FF,IE的纯CSS下拉菜单

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

  • 相关阅读:
    用位运算求一个数的绝对值
    ORACLE临时表总结
    Nagios学习实践系列——配置研究[监控当前服务器]
    SQL SERVER 作业浅析
    超酷的测速网站Ookla SPEEDTEST
    Nagios学习实践系列——基本安装篇
    Nagios学习实践系列——产品介绍篇
    Windows Server 2008 下ASP程序连接ORACLE数据库驱动错误
    ORACLE基本数据类型总结
    Redhat Server 5.7 安装配置PHP
  • 原文地址:https://www.cnblogs.com/webdm/p/2074837.html
Copyright © 2011-2022 走看看