Html
    Css
    Js
* {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body {
	background:#fff;
	font:12px Microsoft YaHei,arial,sans-serif;
}
ul {
	list-style-type:none;
}
a {
	color:#f39800;
	text-decoration:none;
}
/** =======================
 * Contenedor Principal
 ===========================*/
.list-title {
	display:inline-block;
	width:100%;
	max-width:200px;
	border-top:solid 1px #ccc;
	border-left:solid 1px #ccc;
	border-right:solid 1px #ccc;
	background:#FFF;
	text-align:center;
	height:60px;
	line-height:60px;
	font-size:20px;
	color:#f39800;
	font-weight:bold;
	cursor:pointer;
}
h1 {
	color:#FFF;
	font-size:24px;
	font-weight:400;
	text-align:center;
	margin-top:80px;
}
h1 a {
	color:#f39800;
	font-size:16px;
}
.accordion {
	width:100%;
	max-width:200px;
	border:solid 1px #ccc;
	background:#FFF;
}
.accordion .link {
	cursor:pointer;
	display:block;
	padding:15px 15px 15px 42px;
	color:#4D4D4D;
	font-size:14px;
	font-weight:700;
	border-bottom:1px solid #CCC;
	position:relative;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.accordion li:last-child .link {
	border-bottom:0;
}
.accordion li {
	cursor:pointer;
}
.accordion li i {
	position:absolute;
	top:16px;
	left:12px;
	font-size:18px;
	color:#595959;
	-webkit-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.accordion li i.fa-chevron-down {
	right:12px;
	left:auto;
	font-size:16px;
}
.accordion li.open .link {
	color:#f39800;
}
.accordion li.open i {
	color:#f39800;
}
.accordion li.open i.fa-chevron-down {
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
/**
 * Submenu
 -----------------------------*/
.submenu {
	display:none;
	background:#f5f5f5;
	font-size:14px;
}
.submenu li {
	border-bottom:1px solid #d6d7dc;
}
.submenu a {
	display:block;
	text-decoration:none;
	color:#666;
	padding:12px;
	padding-left:42px;
	-webkit-transition:all 0.25s ease;
	-o-transition:all 0.25s ease;
	transition:all 0.25s ease;
}
.submenu a:hover,.submenu li.current a {
	background:#f39800;
	color:#FFF;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

手风琴式下拉菜单

0