简单的横向下拉菜单js 

<!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].οnmοuseοver=function(){
                        var ulOne=this.getElementsByTagName("ul")[0];
                        ulOne.style.display="block";
                        ulOne.className="show";
                    }
                    liList[i].οnmοuseοut=function(){
                        var ulOne=this.getElementsByTagName("ul")[0];
                        ulOne.style.display="none";
                    }
                }
            }
        </script>
    </body>
</html>

posted @   wojiaohuangyu  阅读(10)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示