创建小程序下拉菜单
菜单的按钮箭头是利用边框线加旋转功能实。
利用css display: none;隐藏菜单，和.dropdown:hover .dropdown-content {
display: block;显示菜单详见代码
wxml内容

     !--下拉菜单  --    view class='weui-cell '      !--下拉框  --      view class="weui-cell__bd dropdown" bindtap='bindShowMsg'        span class="dropbtn"分类/span        span class="jiantoudown"/span        !-- 下拉需要显示的列表 --        view class="dropdown-content" wx:if="{{select}}"          block wx:for="{{infotype}}" wx:key="this" wx:for-item="item"            view class="dropdown-item" bindtap="mySelect" data-name="{{index}}"{{item}}/view          /block        /view      /view      !--下拉框  --      view class="weui-cell__bd dropdown" bindtap='bindShowMsg'        span class="dropbtn"附近/span        span class="jiantoudown"/span        !-- 下拉需要显示的列表 --        view class="dropdown-content" wx:if="{{select}}"          block wx:for="{{infotype}}" wx:key="this" wx:for-item="item"            view class="dropdown-item" bindtap="mySelect" data-name="{{index}}"{{item}}/view          /block        /view      /view     !--下拉框  --      view class="weui-cell__bd dropdown" bindtap='bindShowMsg'        span class="dropbtn"智能排序/span        span class="jiantoudown"/span        !-- 下拉需要显示的列表 --        view class="dropdown-content" wx:if="{{select}}"          block wx:for="{{infotype}}" wx:key="this" wx:for-item="item"            view class="dropdown-item" bindtap="mySelect" data-name="{{index}}"{{item}}/view          /block        /view      /view    /view

js的内容

  data: {    infotype: ["转让", "求购", "出租", "求租", "求职", "公益"],    nearytype: ["1千米", "3千米", "5千米", "10千米", "全城", "地图点选"],    ordertype: ["智能排序","好评优先","离我最近","佣金最高",]  },  mySelect(e) {    var name = e.currentTarget.dataset.name    this.setData({      tihuoWay: name,      select: false    })  },  bindShowMsg() {    this.setData({      select: !this.data.select    })  },

wxss内容

/*箭头---通过角旋转得倒，*/.jiantoudown{  padding-right: 3px; }.dropbtn:after{  content: " ";  display: inline-block;  height: 6px;  width: 6px;  border-width: 2px 2px 0 0;  border-color: #c8c8cd;  border-style: solid;  -webkit-transform:rotate(135deg);  transform: rotate(135deg);  top: -2px;  position: relative;  top: 50%;  margin-top: -4px;  right: -17rpx;}/*下拉菜单*/.dropdown {    display: inline-block;}.dropdown-content {  display: none;  /*下拉菜单先不显示*/  position: absolute;  background-color: #f9f9f9;  min-width: 100rpx;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 10px 16px;}/* 下接菜单项*/.dropdown-item{padding: 10px 15px;}.dropdown-item:hover { background-color: #3e8e41; }/* 当鼠标在下拉菜单按钮上时显示菜单*/.dropdown:hover .dropdown-content {  display: block;}/* 当鼠标在下拉菜单按钮上时按钮变色*/.dropdown:hover .dropbtn {    color: #3e8e41; /* 当下拉内容显示后修改下拉按钮的背景颜色*/}