JS UL下拉菜单

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<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: 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;
        }
        #nav li.sfout ul
        {
            line-height: 27px;
            list-style-type: none;
            text-align: left;
            left: -999em;
            width: 180px;
            position: absolute;
        }
        #content
        {
            clear: left;
        }
        </style>

<script type="text/javascript">
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");

 for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
        this.className="sfhover";
    }
    sfEls[i].onmousedown=function() {
        this.className="sfhover";
    }
    sfEls[i].onmouseup=function() {
        this.className="sfhover";
    }
    sfEls[i].onmouseout=function() {
        this.className="sfout";
    }
 }
}
window.onload=menuFix;
</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>
posted on 2011-03-29 12:42  雨季  阅读(403)  评论(0)  编辑  收藏  举报