* {
	margin:0;
	padding:0;
}
ul,li,ol {
	list-style:none;
}
.tabar {
	width:200px;
	background:DarkSlateBlue;
	overflow:hidden;
}
.tabar li {
	width:100%;
	line-height:50px;
	color:#fff;
}
.tabar li span:hover {
	background:rgba(255,255,255,0.2);
}
.tabar li span {
	display:block;
	height:50px;
	cursor:pointer;
	padding-left:10px;
}
.tabar-item ul {
	display:none;
}
.tabar-item ul li {
	padding-left:30px;
	background:rgba(0,0,139,0.4);
}
.tabar-item ul li:hover {
	background:rgba(255,255,255,0.2);
}
.tabar-item ul li.active {
	background:rgba(255,255,255,0.2);
}
.tabar1 {
	width:200px;
	background:DodgerBlue;
}
.tabar1 li {
	cursor:pointer;
	text-align:center;
	position:relative;
}
.tabar1 li div {
	width:300px;
	height:400px;
	background:SkyBlue;
	position:absolute;
	top:0px;
	left:200px;
	display:none;
}
.tabar1 li span {
	display:block;
	color:#fff;
	height:50px;
	line-height:50px;
}
.tabar1 li:hover span {
	background:rgba(255,255,255,0.2);
}
.tabar1 li:hover div {
	display:block;
}