html 纯css下拉框,纯CSS下拉展示（下拉菜单）

昨天写了一个新的CSS，如图所示，使用纯CSS实现，我个人不是很擅长JS，所以纯CSS也是不得已。

HTML代码：商品互踩群

• 群1：2851618834(满)
• 群1：2851618834
• 群1：2851618834

CSS：.topr .cai{display:inline-block;

padding-left: 4px; padding-right: 4px;

line-height: 30px;

height: 30px;

border-left: 1px solid #ededed; border-right: 1px solid #ededed;border-bottom: 1px solid #FFF;/*默认下白边*/

position: relative;

margin-bottom: -1px;

background-color: #FFF;/*默认开启背景色*/

}

.topr .cai .qun{display: block; /*默认下拉*/

position: absolute;

right: -1px;

width: 160px;

border: 1px solid #ededed;

background-color: #FFF;

z-index: -1;

height: 80px;

}

.qun ul{list-style: none;position: absolute; top: 8px; left: 6px;}

.qun ul li{line-height: 22px; background: url(../images/qq.png) no-repeat left; text-align: left; padding-left: 22px;}

.qun ul li i{ color: #e53433;font-style:normal;}

.topr .cai:hover{background-color: #FFF;height: 69px;border-left: 1px solid #ededed; border-right: 1px solid #ededed; border-bottom: 1px solid #FFF;}

.topr .cai:hover .qun{display: block;}/*鼠标触发下拉*/

以上CSS为下拉区域使用了display: block;固定显示了，没有进行隐藏，所以默认为下拉状态显示。

提醒：使用z-index: -1;时请注意，一不小心就无法点击下拉区域了。