纯css实现下拉菜单
1、效果如下：
2、html代码
时间最近
3、css代码
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.drop-box {
box-sizing: border-box;
width: 150px;
font-size: 14px;
text-align: center;
border-radius: 10px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.175);
overflow: hidden;
margin-bottom: 5px;
}
.drop-box p {
height: 24px;
padding-top: 5px;
position: relative;
z-index: 10;
margin: 0px;
}
.drop-box p:after { /*三角箭头*/
position: absolute;
top: 10px;
right: 10px;
width: 0px;
height: 0px;
content: '';
border: 6px solid transparent;
border-top-color: #E4E4E3;
}
.drop-box .menu {
display: none;
background-color: #fff;
}
.drop-box .menu li {
height: 35px;
line-height: 35px;
}
.drop-box .menu li:hover {
background-color: #fee5ca;
color: #fda653;
}
.drop-box .menu .dp-active {
display: none;
}
.drop-box:hover {
cursor: pointer;
}
.drop-box:hover .menu {
display: block;
}
.drop-box:hover p:after {
top: 5px;
border: 6px solid transparent;
border-bottom-color: #E4E4E3;
}
