querySelector实现下拉菜单的效果

本文主要是介绍querySelector实现下拉菜单的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现下拉菜单缓慢显示，鼠标移出缓慢消失
html代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/04-21.css"><script src="../js/jquery.min.js"></script>
</head>
<body><div class="select"><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><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><a href="">一级菜单</a><ul><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li></ul></li><li><a href="">一级菜单</a><ul><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li>                  </ul></li><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><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li>                    </ul></li></ul></div>
</body>
<script src="../js/04-21.js"></script>
</html>

css代码部分：

*{margin: 0;padding: 0;transition: all .5s ease;
}
a{text-decoration: none;
}
ul{list-style: none;
}
.select{width: 80%;margin: 200px auto;
}
.select>ul{justify-content: space-between;display: flex;}
.select>ul>li{width: 100%;height: 30px;line-height: 30px;text-align: center;background: linear-gradient(to bottom,red,blue);margin-left: 20px;
}
.select ul li a:hover{opacity: 0.8;
}
.select ul li a{display: block;color: #fff;background: linear-gradient(to bottom,red,blue);
}
.select>ul>li>ul{height: 0;overflow: hidden; 
}

javasript代码部分：

var list = document.querySelectorAll(".select>ul>li");
console.log(list);
for(var i = 0; i < list.length;i++){list[i].onmouseover=function(){if(this.querySelector("ul")){var sli_count = this.querySelectorAll("ul>li").length;this.querySelector("ul").style.opacity="1";this.querySelector("ul").style.height=sli_count*30+"px";}}list[i].onmouseout=function(){if(this.querySelector("ul")){this.querySelector("ul").style.opacity="0";this.querySelector("ul").style.height="0px";}}
}