js设置下拉菜单（详细解释，用了css简化代码）

js设置下拉菜单

html内容处理

<div class="top-title">
            <ul>
                <li><a>首页</a>

                    <ul>
                        <li><a href="#">一级菜单1</a></li>

                        <li><a href="#">一级菜单2</a></li>

                        <li><a href="#">一级菜单3</a></li>

                        <li><a href="#">一级菜单4</a></li>

                    </ul>
                </li>
                <li><a>学院概况</a>
                    <ul>
                        <li><a href="#">一级菜单1</a></li>
                    </ul></li>

                <li><a>师资队伍</a>
                    <ul>
                        <li><a href="#">一级菜单1</a></li>

                        <li><a href="#">一级菜单2</a></li>

                        <li><a href="#">一级菜单3</a></li>

                        <li><a href="#">一级菜单4</a></li>
                    </ul></li>
                <li><a>学生工作</a>
                    <ul>
                        <li><a href="#">一级菜单1</a></li>

                        <li><a href="#">一级菜单2</a></li>
                    </ul></li>
            </ul>

        </div>

内置的js

 <script><script>

        var list=document.querySelectorAll(".top-title>ul>li");

            //在获取一个节点，不去定是否拿到了，最好输出一下

            console.log(list);

            //必须是先找到li再找到a,注意是querySelector，没有All，

            //li下的ul也是算li的，很巧妙解决了移除ul再把一级菜单置空问题

            //第一层循环是统一处理一级标题的

            for(var i=0;i<list.length;++i){

                //一级标题被onmouseover，ul也是算li的，鼠标在li下的ul也算li

                list[i].onmouseover=function(){

                    //设置ul也就是下拉菜单的显示

                    if(this.querySelector("ul")){

                        this.querySelector("ul").style.opacity=1;

                        //求高度用querySelectorAll

                        var len=this.querySelectorAll("ul>li").length;

                        this.querySelector("ul").style.height=len*34+"px";

                    } 

                    //选取到了，给li的a设置一个className，css再赋予这个名字

                    //的元素样式达到反应变换效果，就不用一个属性一个属性加了                   

                    //先把所有的一级菜单清空名字

                    for(var k=0;k<list.length;++k){

                        list[k].querySelector("a").className="";

                    }
                    //把当前一级菜单设置类名

                    this.querySelector("a").className="dd";

                }                
                list[i].onmouseout =function(){

                    //设置下拉菜单的消失

                    if(this.querySelector("ul")){

                        //this.querySelector("ul").style.opacity=0;

                    this.querySelector("ul").style.height=0;

                    }

                    //设置一级菜单的消失

                    for(var k=0;k<list.length;++k){

                    list[k].querySelector("a").className="";

                }

                }
              }         
          </script>

css
transition: all 2s ease;这是设置变换速度的

*{    margin:0;    padding:0;    transition: all 2s ease;}
.dd{    background-image: linear-gradient(to bottom, red , yellow);
}