| 加入收藏| 设为首页| 联系我们
首页 站长学习 站长之家 源码下载 建站素材 书籍教程 常用工具
 您现在的位置： 动力中国 >> 网页制作 >> CSS教程 >> 文章正文 　
 纯CSS的下拉菜单 支持IE6 IE7 Firefox
 

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

http://www.domcn.org  文章来源：本站收藏  点击数：

  关键字:纯CSS的下拉菜单 支持IE6 IE7 Firefox

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>  
<html>  
<!-- www.div-css.com 网站标准化  2007-4-16 -->  
<head>  
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />  
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化</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>  
</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=>布局教程专题</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=>AJAX   
            <!--[if IE 7]><!--></a><!--<![endif]-->  
            <!--[if lte IE 6]><table><tr><td><![endif]-->  
            <ul>  
                <li><a href=>AJAX教程</a></li>  
                <li><a href=>AJAX技术</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=>PHP</a></li>  
                <li><a href=>ASP</a></li>  
                <li><a href=>ASP.NET</a></li>  
                <li><a href=>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>  
  
<br /><br />  
<a href=http://www.div-css.com target=_blank>www.div-css.com 网站标准化  2007-4-16</a>  
css drop down menu   
</body>  
</html>


纯CSS的下拉菜单 支持IE6 IE7 Firefox
  • 上一篇文章：

  • 下一篇文章：
    •  热门文章
    普通文章 电子邮件改头换面 四公司畅谈未
    普通文章 PC病毒史上最声名狼藉的八大病
    普通文章 Rails系统中的AJAX开发技术简析
    普通文章 基于ASP.NET AJAX框架实现表单
    普通文章 开发ASP.NET AJAX客户端定制行
    普通文章 用JFreeChart对JSP报表进行增强
    普通文章 SQL Server 2005上的CLR和ADO.
    普通文章 SQL Server 2005的XML支持机制
    普通文章 Firefox中标签式浏览技巧大全
    普通文章 Tomcat中的Session和Cookie大揭
    		 
     推荐文章
    推荐文章 把Google地图嵌入网页 就是这么
    推荐文章 迅雷搜索候选资源出错的解决
    推荐文章 轻松去除迅雷里的各种广告和资
    推荐文章 突破限制 免费领养到QQ空间五级
    推荐文章 Rational统一过程RUP贴近中小软
    推荐文章 构建自己的轻量级XML DOM分析程
    推荐文章 WPS Office 2007技巧:妙用配置
    推荐文章 Excel 2007:求余数函数实用进阶
    推荐文章 浅谈ASP.NET的Postback
    推荐文章 软件开发中项目需求管理简述
    		 
     相关文章
    没有相关文章
    设为首页 | 加入收藏 | 广告合作 | 联系站长 | 版权申明 |
    动力中国为网友提供免费学习资料，可用资源，如果您认为我们的相关内容侵害到了您的权利请联系管理员
    Copyright © 2006-2008 domcn.org All Rights Reserved.