纯css和js版下拉菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:0;margin:0; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:0; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin:0 auto;}
.all li:hover ul{display:block;}//ie6死了,可以正大光明不考虑兼容问题了,可以放心使用伪类了
</style>
</head>
<body>
<div class="all">
    <ul>
        <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>网页设计
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>ui设计
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>动画设计
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>js特效
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js版下拉菜单</title>
<style type="text/css">
div,body,ul,li{padding:0;margin:0; list-style:none;}
.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:0;}
li{width:100px; height:30px; background:#ccc; float:left; text-align:center; margin-right:10px; cursor:pointer; position:relative; _display:inline;}
ul ul li{color:red;}
ul ul{position:absolute; left:0; top:30px; display:none;}
.ceshi{width:800px; height:100px; background:gold; margin:0 auto;}
</style>
<script>
window.onload=function()
{
    var oMenu=document.getElementById(menu);
    var aLi=oMenu.children;
    var aUl=oMenu.getElementsByTagName(ul);
    for(var i=0;i<aLi.length;i++)
    {
        aLi[i].index=i;
        aLi[i].onmouseover=function()
        {
            for(var i=0;i<aUl.length;i++)//首先是先排除再选择自己
                {
                    aUl[i].style.display=none;
                }
                aUl[this.index].style.display=block;
        }
        aLi[i].onmouseout=function()
        {
            for(var i=0;i<aUl.length;i++)
                {
                    aUl[i].style.display=none;
                }
        }
    }
    
};
</script>
</head>

<body>
<div class="all">
    <ul id="menu">
        <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>网页设计
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>ui设计
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>动画设计
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>js特效
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
<div class="ceshi">测试用</div>
</body>
</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。