效果图

首先来看一下html结构，很简单

     
          hover    
      
        
       
公告
        
       
投诉
        
       
搜索
        
       
绑定微信
        
       
修改密码
        
       
查看二维码
        
       
退出登录
    
      
     

这是css

 

a{    text-decoration: none;}li{    list-style: none;}.pop-con{    position: relative;    width: 50px;    height: 20px;    margin: 0 auto;    border: 1px solid #eee;    padding: 10px;}.pop-con:hover>.pop{    visibility: visible;}.pop{    visibility: hidden;    position: absolute;    padding-left: 0;    background: white;    width: 110px;    top: 0;    left: -10px;    margin-top: 44px;    filter: drop-shadow(0px 3px 5px rgba(0,0,0,.32));    border-radius: 4px;    padding-top: 0.25rem;    padding-bottom: 0.25rem;}.pop::before{    content: '';    height: 0;    width: 0;    border: 10px solid transparent;    border-color: transparent transparent white transparent;/*这是个三角形*/    position: absolute;    top: -20px;    left: 10px;                }.pop li{    color: #333;    text-align: center;    padding-left: 0.25rem;    height: 30px;    line-height: 30px;            }.pop li>a{    display: inline-block;    height: 32px;    line-height: 30px;    font-size: 15px;    width: 100%;    color: #333;            }

想象一下，其实很多的菜单原理都是一样的，修改一下尺寸，修改一下定位就能购应用在很多场景，比如我模仿天猫写的的这个，当然下面这个需要结合js，相对复杂一些：