简单的横向下拉菜单js

来源：互联网发布：c语言是干什么的编辑：程序博客网时间：2024/05/16 17:34
<!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:#EBEBEB;            }*/            #nav{                background-color:#EBEBEB;                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>                                  </ul>                </li>                <li>                    <a href="">新闻中心</a>                    <ul style="display:none;">                        <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>                                 </ul>                </li>                <li>                    <a href="">案例展示</a>                    <ul style="display:none;">                        <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>                    </ul>                </li>                <li>                    <a href="">客户留言</a>                    <ul style="display:none;">                         <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>            </ul>        </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>
0 0