js练习7(横向下拉菜单)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>横向下拉菜单</title>
        <style>
            #menu{
                width:100%;
                background:#000;
            }
            #nav{
                background-color:#000;
                width:880px;
                height:30px;
                margin:0px auto;
            }
            #nav li{float:left;list-style:none;}
            #nav li a{
                display:block;
                width:110px;
                height:30px;
                line-height:30px;
                list-style:none;
                text-align:center;
            }
            a{text-decoration:none;color:#fff;font-weight:bold;}
            a:hover{
                background:#ccc;
            }
            ul,li{
                margin:0px;padding:0px;
            }
            #nav li .show{
                position:absolute;
                background:#000;
            }
            #nav li .show li{
                float:none;
                position:relatvie;
                list-style:none;
            }
            
        </style>
    </head>
    <body>
        <div id="menu">
            <ul id="nav">
                <li>
                    <a href="">网站首页</a>
                    <ul></ul>
                </li>
                <li>
                    <a href="">关于我们</a>
                    <ul style="display:none;">
                        <li><a href="">公司简介</a></li>
                        <li><a href="">公司资讯</a></li>
                        <li><a href="">董事长致辞</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">新闻中心</a>
                    <ul style="display:none;">
                        <li><a href="">企业新闻</a></li>
                        <li><a href="">企业公告</a></li>
                        <li><a href="">世界新闻</a></li>
                    </ul>
                </li>
                <li >
                    <a href="">产品展示</a>
                    <ul style="display:none;">
                        <li><a href="">笔记本电脑</a></li>
                        <li><a href="">智能手机</a></li>
                        <li><a href="">iPhone5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">案例展示</a>
                    <ul style="display:none;">
                        <li><a href="">笔记本电脑</a></li>
                        <li><a href="">智能手机</a></li>
                        <li><a href="">iPhone5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">人才招聘</a>
                    <ul style="display:none;">
                        <li><a href="">笔记本电脑</a></li>
                        <li><a href="">智能手机</a></li>
                        <li><a href="">iPhone5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">客户留言</a>
                    <ul style="display:none;">
                        <li><a href="">笔记本电脑</a></li>
                        <li><a href="">智能手机</a></li>
                        <li><a href="">iPhone5</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">联系我们</a>
                    <ul style="display:none;">
                        <li><a href="">笔记本电脑</a></li>
                        <li><a href="">智能手机</a></li>
                        <li><a href="">iPhone5</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="test">
            测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功测试是否成功
        </div>
        <script>
            var nav=document.getElementById("nav");
                //获得所有子节点(元素节点,文本节点,属性节点...等等)
            var liList=nav.childNodes;
                //循环遍历所有节点
            for(var i=0;i<liList.length;i++){
                    //判断是否是元素节点
                if(liList[i].nodeType==1){
                    liList[i].onmouseover=function(){
                        var ulOne=this.getElementsByTagName("ul")[0];
                        ulOne.style.display="block";
                        ulOne.className="show";
                    }
                    liList[i].onmouseout=function(){
                        var ulOne=this.getElementsByTagName("ul")[0];
                        ulOne.style.display="none";
                    }
                }
            }
        </script>
    </body>
</html>

必须注意的一点是这里的定位:

#nav li .show{
                position:absolute;
                background:#000;
            }
            #nav li .show li{
                float:none;
                position:relatvie;
                list-style:none;
            }

 

你可能感兴趣的:(下拉菜单)