.menu {
	width:217px;
}

.menu, .menu ul {
	margin:0;
	padding:0;
	border:0;
	list-style-type:none;
	display:block;
}

.menu li {
	margin:0;
	padding:0;
	border:0;
	display:block;
	position:relative;
	z-index:5;
}

.menu li:hover {
	z-index:10000;
	white-space:normal;
}

.menu ul {
	visibility:hidden;
	position:absolute;
	z-index:10;
	left:0;
	top:0;
}

.menu li:hover>ul {
	visibility:visible;
	left: 100%;
}

.menu:after, .menu ul:after {
	content:".";
	height:0;
	display:block;
	visibility:hidden;
	overflow:hidden;
	clear:both;
}
.menu, .menu ul {
	min-height:0;
}

.menu ul {
	background-image:url(/library/images/spacer.gif);
	padding:30px 30px 30px 10px;
	margin:-30px 0 0 -10px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */
}

/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
	color:#dadfe2;
}

.menu {
	width:217px;
}

.menu ul {
	width:217px;
}

.menu a {
	text-decoration:none;
	color:#dadfe2;
	padding:0;
	display:block;
}

.menu li li {
	background:#3a586f;
}

.menu li ul li a {
	text-decoration:none;
	color:#dadfe2;
	padding:10px;
	display:block;
	border:0;
}

.menu a:hover, .menu li:hover>a {
	background:#23425a;
	color:#b0cce2;
}

.menu li {
	border:0;
}

.menu li:hover>ul {
	top:0px;
	left:100%;
}