纯css和js版下拉菜单

时间：2023-03-08 16:52:32
纯css和js版下拉菜单 
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css版下拉菜单</title>

<style type="text/css">

div,body,ul,li{padding:;margin:; list-style:none;}

.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}

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:; top:30px; display:none;}

.ceshi{width:800px; height:100px; background:gold; margin: 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:;margin:; list-style:none;}

.all{width:550px; height:30px; background:#06F; margin:100px auto; line-height:30px; padding-left:10px; margin-bottom:;}

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:; top:30px; display:none;}

.ceshi{width:800px; height:100px; background:gold; margin: auto;}

</style>

<script>

window.onload=function()

{

    var oMenu=document.getElementById('menu');

    var aLi=oMenu.children;

    var aUl=oMenu.getElementsByTagName('ul');

    for(var i=;i<aLi.length;i++)

    {

        aLi[i].index=i;

        aLi[i].onmouseover=function()

        {

            for(var i=;i<aUl.length;i++)//首先是先排除再选择自己

                {

                    aUl[i].style.display='none';

                }

                aUl[this.index].style.display='block';

        }

        aLi[i].onmouseout=function()

        {

            for(var i=;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>

相关文章