css伪元素实现鼠标悬停出现对话框

iconfont icon-shezhi是引入阿里图库的图标

          

            

              

                
修改密码
                
退出登录
              
            
          

css

.icon{
  color:#aaa;
  font-size: 24px;
  padding: 10px;
}
.icon:hover .dialaing{
  display: block;
}
.dialaing{
  margin-top: 10px;
  font-size: 16px;
  display: none;
  margin-left: -54px;
  position: fixed;
  background-color: #fff;
  box-shadow: 5px 5px 15px 2px #c4c4c4;
  ul{
    padding: 10px;
  }
  li{
    color:#000;
    text-align: center;
    width: 80px;
    cursor: pointer;
    padding: 5px 10px;
  }
}
.dialaing::after{
  content: '';
  position: absolute;
  border: 8px solid;
  border-color: transparent transparent #c5c5c5 transparent;
  left: 60px;
  top: -16px;
}
.dialaing::before{
  content: "";
  width: 0;
  height: 0;
  border: 8px solid;
  border-color: transparent  transparent #fff transparent;
  position: absolute;
  top: -16px;
  left: 60px;
  z-index: 2;
}