div+css+js一级下拉菜单完美版

来源：互联网发布：云建站系统源码编辑：程序博客网时间：2024/06/07 21:48

<!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=gb2312" />
    <title>css菜单演示</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body
        {
            font-family: arial, 宋体, serif;
            font-size: 12px;
        }
        #nav
        {
            line-height: 24px;
            list-style-type: none;
            background: #666;
        }
        #nav a
        {
            display: block;
            width: 80px;
            text-align: center;
        }
        #nav a:link
        {
            color: #666;
            text-decoration: none;
        }
        #nav a:visited
        {
            color: #666;
            text-decoration: none;
        }
        #nav a:hover
        {
            color: #FFF;
            text-decoration: none;
            font-weight: bold;
        }
        #nav li
        {
            float: left;
            width: 80px;
            background: #CCC;
        }
        #nav li a:hover
        {
            background: #999;
        }
        #nav li ul
        {
            line-height: 27px;
            list-style-type: none;
            text-align: left;
            left: -999em;
            width: 180px;
            position: absolute;
        }
        #nav li ul li
        {
            float: left;
            width: 180px;
            background: #F6F6F6;
        }
        #nav li ul a
        {
            display: block;
            width: 180px;
            width: 156px;
            text-align: left;
            padding-left: 24px;
        }
        #nav li ul a:link
        {
            color: #666;
            text-decoration: none;
        }
        #nav li ul a:visited
        {
            color: #666;
            text-decoration: none;
        }
        #nav li ul a:hover
        {
            color: #F3F3F3;
            text-decoration: none;
            font-weight: normal;
            background: #C00;
        }
        #nav li:hover ul
        {
            left: auto;
        }
        #nav li.sfhover ul
        {
            left: auto;
        }
        #content
        {
            clear: left;
        }
    </style>
    <script type="text/javascript">
    window.onload = function() {

        var sfEls = document.getElementById("nav").getElementsByTagName("li");

        for (var i=0; i<sfEls.length; i++) {

            sfEls.onmouseover=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }

            sfEls.onMouseDown=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }

            sfEls.onMouseUp=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }

            sfEls.onmouseout=function() {
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
            }
        }
    }
    </script>
</head>
<body>
    <ul id="nav">
        <li><a href="#">产品介绍</a>
            <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="#">产品一</a></li>
            </ul>
        </li>
        <li><a href="#">服务介绍</a>
            <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="#">服务二</a></li>
            </ul>
        </li>
        <li><a href="#">成功案例</a>
            <ul>
                <li><a href="#">案例三</a></li>
                <li><a href="#">案例</a></li>
                <li><a href="#">案例三案例三</a></li>
                <li><a href="#">案例三案例三案例三</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a>
            <ul>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四</a></li>
                <li><a href="#">我们四111</a></li>
            </ul>
        </li>
        <li><a href="#">在线演示</a>
            <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="#">演示演示</a></li>
                <li><a href="#">演示演示演示</a></li>
                <li><a href="#">演示演示演示演示演示</a></li>
            </ul>
        </li>
        <li><a href="#">联系我们</a>
            <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="#">联系联系联系</a></li>
                <li><a href="#">联系联系联系</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

0 0