Html
    Css
    Js
@charset "UTF-8";
	a {
	color:#2fa0ec;
	text-decoration:none;
	outline:none;
}
a:hover,a:focus {
	color:#74777b;
}
ul.ytree {
	margin:0;
	padding:1.2em;
	min-width:245px;
	float:left;
}
ul.ytree ul {
	margin-left:1em;
}
ul.ytree li {
	list-style:none;
}
ul.ytree a {
	display:block;
	padding:5px 0;
}
ul.ytree li.ytree-node > a {
	font-weight:bold;
}
ul.ytree li.ytree-node {
	position:relative;
}
ul.ytree li.ytree-node ul {
	display:none;
	margin-left:0;
	padding-left:10px;
}
li.ytree-node .ytree-spread {
	position:absolute;
	right:3px;
	color:#69a0ec;
	font-weight:bold;
	cursor:pointer;
	width:20px;
}
.ytree-spread {
	display:flex;
	align-items:center;
	justify-content:center;
}
.ytree-spread > i {
	transition:transform .3s;
	-webkit-transition:transform .3s;
}
.ytree-active > i {
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}
ul.ytree a {
	-webkit-transition:all 300ms ease-out;
	-moz-transition:all 300ms ease-out;
	-ms-transition:all 300ms ease-out;
	-o-transition:all 300ms ease-out;
	transition:all 300ms ease-out;
}
li.ytree-aim {
	background-color:#92d3ff;
}
li.ytree-aim a {
	color:#fff;
	text-indent:5px;
}

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

导航垂直导航

尝试保存一个

菜单的层级结构借用了本站插件  http://www.jq22.com/jquery-info3743  的,因为这个结构既有无后代菜单的,也有4层深度后代菜单的

主要是让菜单能展开到某个目标层级,不管这个目标层级是最后一级还是有后代层级

0