• 纯DIV+CSS下拉菜单


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html>  
    <head>  
    <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;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>  
    </body>  
    </html>
  • 相关阅读:
    Alpha 冲刺 (4/10)
    福大软工1816 · 团队现场编程实战(抽奖系统)
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
    Alpha 冲刺 (1/10)
    福大软工 · 第七次作业
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    福大软工1816 · 第六次作业
    福大软工1816 · 第五次作业
    福大软工1816 · 第四次作业
  • 原文地址:https://www.cnblogs.com/juan/p/1487460.html
Copyright © 2020-2023  润新知