html 中的 css 的下拉菜单

html 中的 css 的下拉菜单

/**********************************/

.drop-down {
	list-style: none;
	width: 130%;
	margin: 0px auto;
	margin-left: -41px;
	background-color: rgba(58, 66, 74, 1);
}

.drop-down>li {
	border: 1px solid #000;
	padding: 10px;
	border-bottom: none;
	position: relative;
	cursor: pointer;
}

.drop-down>li:last-child {
	border-bottom: 1px solid #000;
}

.drop-down>li>span {
	/*display: inline-block;*/
	width: 26px;
	height: 22px;
	/*position: absolute;*/
	right: 15px;
	/*top: 15px;*/
	color: rgba(255, 255, 255, 1);
	cursor: pointer;
}

.drop-down>li>span>i.fa, .drop-down>li>ul>li>a>label>i.fa {
	margin: 0px 5px;
}

.drop-down>li>ul>li>a>label {
	width: 200px;
	color: rgba(255, 255, 255, 1);
	padding-left: 26px;
	cursor: pointer;
}

.sub {
	display: none;
	padding-top: 15px;
}

.sub>li {
	list-style: none;
	margin-left: -41px;
	padding: 6px;
	background: #343a40;
	border-bottom: 1px solid #4d5663;
}

.sub>li:first-child {
	border-top: 1px solid #4d5663;
}

.sub>li:hover {
	background: #4d5663;
}


/**********************************/

.card-drop-down {
	list-style: none;
	width: 100%;
	float: left;
	margin: 0px auto;
	padding: 0px;
}

.card-drop-down>li {
	border: 1px solid #000;
	padding: 10px;
	border-bottom: none;
	position: relative;
}

.card-drop-down>li:last-child {
	border-bottom: 1px solid #000;
}

.card-drop-down>li>span {
	display: inline-block;
	width: 26px;
	height: 22px;
	position: absolute;
	right: 15px;
	top: 15px;
}

.card-drop-down>li>ul>li>a>label {
	width: 200px;
}

.card-sub {
	display: none;
	padding-top: 15px;
}

.card-sub .active {
	display: inline-block;
}