html用css做下拉菜单,纯css实现下拉菜单

纯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;

}