需求：

下拉框带有阴影的小三角型
html:

    <ul class="dev_panel">
        <div class="triangle"></div>
        <li>1#制冷主机</li>
        <li class="act-li">2#制冷主机</li>
    </ul>

css:

.dev_panel {
   margin-top: 20px;
   position: relative;
   width:140px;
   height:60px;
   background:rgba(255,255,255, 0.6);
   box-shadow:0px 0px 9px 1px rgba(54,96,225,0.3);
   border-radius:4px;
   opacity: 0.9;
   .triangle {
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 8px solid rgba(255, 255, 255, 1);
     position: absolute;
     top: -8px;
     left: 50%;
     margin-left: -8px;
  }
 .triangle:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 8px solid rgba(54, 96, 225, 0.3);
   position: absolute;
   margin-left: -8px;
   z-index: -1;
   filter: blur(2px);
  }
   li {
     width:140px;
     height:30px;
     border-radius: 0 0 4px 4px;
     background:rgba(255,255,255,1);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 14px;
     color: rgba(51, 51, 51, 1);
   }
   .act-li {
     background:rgba(61,108,253,1);
     color: #fff;
   }
 }

效果图：

效果图.png