用纯css手写一个带小三角形和阴影的下拉菜单

用纯css手写一个带小三角形和阴影的下拉菜单

	<template>
	    <view>
	        <view class="menu-list">
	            <view
	                class="menu-item"
	                hover-class="hoverClass"
	                >删除</view
	            >
	        </view>
	    </view>
	</template>
	
	<script>
		export default {};
	</script>
	
	<style lang="less">
		.menu-list {
		    width: 224rpx;
		    height: 100rpx;
		    background-color: #fff;
		    border: 1px solid #e6eaee;
		    box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.2);
		    margin: 28rpx 0 0 0;
		    border-radius: 16rpx;
		    position: absolute;
		    z-index: 99;
		    right: 18rpx;
		    padding: 12rpx 0;
		
		    .menu-item {
		        height: 100%;
		        padding: 28rpx 32rpx;
		    }
		
		    &:after {
		        position: absolute;
		        display: inline-block;
		        top: -14rpx;
		        left: 148rpx;
		        width: 0;
		        height: 0px;
		        content: "";
		        border-style: solid;
		        border-width: 14rpx;
		        border-color: #fff #fff transparent transparent;
		        transform: rotate(-45deg);
		        box-shadow: 2rpx -2rpx 0px #eee;
		    }
		}
		
		.hoverClass {
		    background: #f6f8fa;
		}
	</style>