zoukankan      html  css  js  c++  java

  • 发布两款纯CSS编写的下拉菜单已测IE6,7,8,FF均可运行

    代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <!-- rutongnet.com">www.rutongnet.com 网站标准化-->
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.rutongnet.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, .menu ul 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; color:#fff; text-decoration:none; margin:3px; padding:2px 10px}
    .menu a:hover    {background:#f2cdb0; color:red; border:1px solid red}
    .menu ul ul li    {clear:both; text-align:left; font-size:12px}
    .menu ul ul li a    {display:block; width:100px; height:13px; border:0; border-bottom:1px solid red; margin:0}
    .menu ul ul li a:hover    {border:0; background:#f2cdb0; border-bottom:1px solid #fff}
            
            </style>
            <style type="text/css">
        
        
            </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>
            <div class="dddd"></div>
            <br />
            <br />
    </body>
    </html>


     

    代码
    <!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>www.rutongnet.com</title>
            <style type="text/css">
            .menu
                {
                font-family    : 黑体;
                font-weight    : bold;
                color    : Gray; /*750px; */
                position    : relative;
                font-size    : 0.85em;
                padding-bottom    : 250px;
                }
            .menu ul
                {
                padding    : 0;
                margin    : 0;
                list-style-type    : none;
                }
            .menu ul li
                {
                float    : left;
                position    : relative;
                }
                /*正常不移鼠标的样式*/
            .menu ul li a, .menu ul li a:visited
                {
                display    : block;
                text-decoration    : none;
                color    : Gray;
                width    : 139px;
                height    : 3em;
                border    : 1px solid #fff;
                border-width    : 1px 1px 0 0;
                background    : #dfc184;
                padding-left    : 10px;
                line-height    : 3em;
                }
            * html .menu ul li a, .menu ul li a:visited
                {
                width    : 149px;
                width    : 139px;
                }
            .menu ul li ul
                {
                display    : none;
                }
            table
                {
                margin    : -1px;
                border-collapse    : collapse;
                font-size    : 1em;
                }
                /* specific to non IE browsers */
            .menu ul li:hover a
                {
                color    : #fff;
                background    : #bd8d5e;
                }
                /* 鼠标移上去的时候 */
            .menu ul li:hover ul
                {
                display    : block;
                position    : absolute;
                top    : 3em;
                margin-top    : 1px;
                left    : 0;
                width    : 150px;
                }
            .menu ul li:hover ul li ul
                {
                display    : none;
                }
            .menu ul li:hover ul li a
                {
                display    : block;
                background    : #faeec7;
                color    : #000;
                height    : auto;
                line-height    : 1.2em;
                padding    : 5px 10px;
                width    : 129px;
                }
            .menu ul li:hover ul li a.drop
                {
                background    : #c9c9a7;
                }
            .menu ul li:hover ul li a:hover
                {
                background    : #c9c9a7;
                color    : #000;
                }
            .menu ul li:hover ul li:hover ul
                {
                display    : block;
                position    : absolute;
                left    : 150px;
                top    : 0;
                width    : 150px;
                }
            .menu ul li:hover ul li:hover ul.left
                {
                left    : -150px;
                }
            </style>
            <!--[if lte IE 6]>
    <style type="text/css">
    .menu ul li a:hover {
    color:#fff; 
    background:#bd8d5e;
    }
    .menu ul li a:hover ul {
    display:block; 
    position:absolute; 
    top:3em; 
    left:0;
    background:#fff;
    margin-top:0;
    margin-top:1px;
    }
    .menu ul li a:hover ul li a {
    display:block; 
    background:#dbe4ab; 
    color:#000; 
    height:auto; 
    line-height:1.5em; 
    padding:5px 10px; 
    150px;
    129px;
    }
    .menu ul li a:hover ul li a.drop {
    background:#c9c9a7;
    }
    .menu ul li a:hover ul li a ul {
    visibility:hidden; 
    position:absolute; 
    height:0; 
    0;
    }
    .menu ul li a:hover ul li a:hover {
    background:#c9c9a7; color:#000;
    }
    .menu ul li a:hover ul li a:hover ul {
    visibility:visible; 
    position:absolute; 
    top:0; 
    color:#000;
    left:150px;
    }
    .menu ul li a:hover ul li a:hover ul.left {
    left:-150px;
    }

    </style>
    <![endif]    -->
    </head>
    <body>
            <div class="menu">
                <ul>
                    <li><a class="drop" href="http://www.ntkingdee.com/">首页
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="The zero dollar ads page">zero dollars advertising
                                        page    </a></li>
                                        <li><a href="http://www.52css.com/" title="Wrapping text around images">wrapping text
                                        around images    </a></li>
                                        <li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
                                        <li><a href="http://www.52css.com/" title="Removing active/focus borders">active focus</a></li>
                                        <li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                        hover/click with no borders
                                            <!--[if IE 7]><!-->
                                        </a>
                                            <!--<![endif]-->
                                            <table>
                                                <tr>
                                                    <td>
                                                        <ul>
                                                            <li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
                                                            <li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
                                                            borders    </a></li>
                                                            <li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                                            hover/click    </a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                                        </li>
                                        <li class="upone"><a href="http://www.52css.com/" title="Multi-position drop shadow">
                                        shadow boxing    </a></li>
                                        <li><a href="http://www.52css.com/" title="Image Map for detailed information">image
                                        map for detailed information    </a></li>
                                        <li><a href="http://www.52css.com/" title="fun with background images">fun with background
                                        images    </a></li>
                                        <li><a href="http://www.52css.com/" title="fade-out scrolling">fade scrolling</a></li>
                                        <li><a href="http://www.52css.com/" title="em size images compared">em image sizes compared</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                    <li><a href="http://www.52css.com/">解决方案
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="a coded list of spies">a coded list of spies</a></li>
                                        <li><a href="http://www.52css.com/" title="a horizontal vertical menu">vertical menu</a></li>
                                        <li><a href="http://www.52css.com/" title="an enlarging unordered list">enlarging unordered
                                        list    </a></li>
                                        <li><a href="http://www.52css.com/" title="an unordered list with link images">link
                                        images    </a></li>
                                        <li><a href="http://www.52css.com/" title="non-rectangular links">non-rectangular</a></li>
                                        <li><a href="http://www.52css.com/" title="jigsaw links">jigsaw links</a></li>
                                        <li><a href="http://www.52css.com/" title="circular links">circular links</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                    <li><a href="http://www.52css.com/">服务
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="A drop down menu">drop down menu</a></li>
                                        <li><a href="http://www.52css.com/" title="A cascading menu">cascading menu</a></li>
                                        <li><a href="http://www.52css.com/" title="Using content:">content:</a></li>
                                        <li><a href="http://www.52css.com/" title=":hover applied to a div">mozzie box</a></li>
                                        <li><a href="http://www.52css.com/" title="I can build a rainbow">I can build a rainbow
                                        with transparent borders    </a></li>
                                        <li><a href="http://www.52css.com/" title="Snooker cue">a snooker cue using border art</a></li>
                                        <li><a href="http://www.52css.com/" title="Target Practise">target practise</a></li>
                                        <li><a href="http://www.52css.com/" title="Two tone headings">two tone headings</a></li>
                                        <li><a href="http://www.52css.com/" title="Shadow text">shadow text</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                    <li><a href="http://www.52css.com/">产品
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="Example one">the first example for Internet
                                        Explorer    </a></li>
                                        <li><a href="http://www.52css.com/" title="Weft fonts">weft fonts</a></li>
                                        <li><a href="http://www.52css.com/" title="Vertical align">vertically aligning text</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                    <li><a href="http://www.52css.com/">走近儒通
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
                                        colours    </a></li>
                                        <li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
                                        <li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
                                        <li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
                                        <li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                        HOVER/CLICK
                                            <!--[if IE 7]><!-->
                                        </a>
                                            <!--<![endif]-->
                                            <table>
                                                <tr>
                                                    <td>
                                                        <ul class="left">
                                                            <li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
                                                            <li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
                                                            borders    </a></li>
                                                            <li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                                            hover/click    </a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                    <li><a href="http://www.52css.com/">走近儒通
                        <!--[if IE 7]><!-->
                    </a>
                        <!--<![endif]-->
                        <table>
                            <tr>
                                <td>
                                    <ul>
                                        <li><a href="http://www.52css.com/" title="colour wheel">a colour wheel using opaque
                                        colours    </a></li>
                                        <li><a href="http://www.52css.com/" title="a menu using opacity">a menu using opacity</a></li>
                                        <li><a href="http://www.52css.com/" title="partial opacity">partial opacity</a></li>
                                        <li><a href="http://www.52css.com/" title="partial opacity II">partial opacity II</a></li>
                                        <li><a class="drop" href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                        HOVER/CLICK
                                            <!--[if IE 7]><!-->
                                        </a>
                                            <!--<![endif]-->
                                            <table>
                                                <tr>
                                                    <td>
                                                        <ul class="left">
                                                            <li><a href="http://www.52css.com/" title="Styling forms">styled form</a></li>
                                                            <li><a href="http://www.52css.com/" title="Removing active/focus borders">removing active/focus
                                                            borders    </a></li>
                                                            <li><a href="http://www.52css.com/" title="Hover/click with no active/focus borders">
                                                            hover/click    </a></li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </table>
                                            <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <!--[if lte IE 6]>
    </a>
    <![endif]    -->
                    </li>
                </ul>
            </div>
    </body>
    </html>


     
  • 相关阅读:
    Java多线程总结之线程安全队列Queue
    Android模拟器Genymotion使用详解
    Failed to resolve:com.android.support:appcompat-v7:报错处理
    第一次使用Android Studio时你应该知道的一切配置
    sdk manager 打不开
    Android app设置全屏模式
    Android设备与外接U盘实现数据读取操作
    IIS相关优化
    集群、负载均衡、分布式
    docker启动
  • 原文地址：https://www.cnblogs.com/shihao/p/1674363.html
Copyright © 2011-2022 走看看