发布两款纯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>


 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shihao/p/1674363.html