1.废话不多说直接上代码,事实说话
<div class="list">列表
<i class="list-shadow1"></i>
<ul class="top-nav">
<li><a href="javascript:void(0)">列表1</a></li>
<li><a href="javascript:void(0)">列表2</a></li>
<li><a href="javascript:void(0)">列表3</a></li>
<li><a href="javascript:void(0)">列表4</a></li>
</ul>
/div>
.list{
position: relative;
width: 70px;
height: 35px;
line-height: 35px;
margin-left: 10px;
background-color: #000000;
color: #f1f1f1;
text-align: center;
}
.top-nav{
position: absolute;
top: 35px;
width: 90px;
display: none;
padding-top: 10px;
border: 1px solid #999999;
}
.top-nav>li{
height: 30px;
line-height: 30px;
font-size: 14px;
background-color: #FAFAFA;
}
.top-nav>li>a{
display:inline-block;
width: 90px;
text-align: center;
color: #696969;
}
.list:hover{
cursor: pointer;
}
.top-nav>li:hover{
background-color: #ccccCC;
}
.list:hover .top-nav{
display: block;
}
.list-shadow1{
position: absolute;
top: 17px;
margin-left: 5px;
border-color: #DDD transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width:5px;
}
.list:hover .list-shadow1{
position: absolute;
margin-top: -5px;
border-color: transparent transparent #E64E3E transparent;
border-style: dashed dashed solid dashed;
}
2.效果查看演示
<a title="查看演示效果" href="
https://leader755.github.io/checkbox-fillter/
" target="_blank" >点我查看演示效果</a>
<a title="下载源码" href="
https://github.com/Leader755/checkbox-fillter.git
" target="_blank">点我下载源码</a>