微信小程序做下拉菜单的详细步骤

微信小程序做下拉菜单的详细步骤
微信小程序下拉菜单实例，小程序的尝鲜制作，开发工具是0.9版，不过思想和原理是一样的，非常适合微信小程序入门。

微信小程序下拉菜单实例，小程序的尝鲜制作，开发工具是0.9版，不过思想和原理是一样的，非常适合微信小程序入门。

    微信小程序下拉菜单思路与步骤：

    布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。

    1.使用dt做出第一级菜单

    2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层

/*总菜单容器*/.menu {display: block;height: 38px;}/*一级菜单*/.menu dt { font-size: 15px;float:left;width: 33%;height: 38px;border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; text-align: center;background-color: #f4f4f4; color: #5a5a5a;line-height: 38px;}/*二级菜单外部容器样式*/.menu dd{ position: absolute;width: 100%;top:39px; left:0;z-index:999;}/*二级菜单普通样式*/.menu li{ font-size: 14px; line-height: 34px;color: #575757;height: 34px;display: block;padding-left: 8px; background-color: #fff;border-bottom: 1px solid #dbdbdb;}