3.写一个简单的弹出菜单

效果图

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

<div class="pop-con">
    hover
    <ul class="pop">
        <li><a href="#">公告</a></li>
        <li><a href="#">投诉</a></li>
        <li><a href="#">搜索</a></li>
        <li><a href="#">绑定微信</a></li>
        <li><a href="#">修改密码</a></li>
        <li><a href="#">查看二维码</a></li>
        <li><a href="#">退出登录</a></li>
    </ul>
</div>

这是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，相对复杂一些：