Блок с вложенными списками

Посмотреть код html

<div class="el_asideBlock_xxxxxx">
	<div class="wrapperInner">
		<p class="blockTitle">Каталоги</p>
		<ul>
			<li>
				<a href="#">Каталог 1 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
				<ul>
					<li>
						<a href="#">Каталог 1.1 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
						<ul>
							<li>
								<a href="#">Каталог 1.1.1</a>
								<ul>
									<li><a href="#">Каталог 1.1.1.1</a></li>
									<li><a href="#">Каталог 1.1.1.2</a></li>
									<li><a href="#">Каталог 1.1.1.3</a></li>
									<li><a href="#">Каталог 1.1.1.4</a></li>
									<li><a href="#">Каталог 1.1.1.5</a></li>
								</ul>
							</li>
							<li><a href="#">Каталог 1.1.2</a></li>
							<li><a href="#">Каталог 1.2.3</a></li>
							<li><a href="#">Каталог 1.2.4</a></li>
							<li><a href="#">Каталог 1.2.5</a></li>
						</ul>
					</li>
					<li><a href="#">Каталог 1.2</a></li>
					<li><a href="#">Каталог 1.3</a></li>
					<li><a href="#">Каталог 1.4</a></li>
					<li><a href="#">Каталог 1.5</a></li>
					<li><a href="#">Каталог 1.6</a></li>
				</ul>
			</li>
			<li><a href="#">Каталог 2</a></li>
			<li>
				<a href="#">Каталог 3 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
				<ul>
					<li><a href="#">Каталог 3.1</a></li>
					<li><a href="#">Каталог 3.2</a></li>
					<li><a href="#">Каталог 3.3</a></li>
					<li><a href="#">Каталог 3.4</a></li>
					<li><a href="#">Каталог 3.5</a></li>
				</ul>
			</li>
			<li><a href="#">Каталог 4</a></li>
			<li><a href="#">Каталог 5</a></li>
			<li><a href="#">Каталог 6</a></li>
			<li><a href="#">Каталог 7</a></li>
			<li><a href="#">Каталог 8</a></li>
			<li><a href="#">Каталог 9</a></li>
			<li><a href="#">Каталог 10</a></li>
		</ul>
	</div>
</div>

Посмотреть код css

.el_asideBlock_xxxxxx
{
}
.el_asideBlock_xxxxxx .wrapperInner
{
	border: 1px solid #446A7E;
	border-radius: 3px;
	margin-bottom: 30px;
}
.el_asideBlock_xxxxxx .blockTitle
{
	border-radius: 3px 3px 0px 0px;
	background-color: #2091C9;
	padding: 15px 10px;
 
	font-size: 2rem;
	font-weight: bold;
	color: #FFFFFF;
}
.el_asideBlock_xxxxxx ul
{
}
.el_asideBlock_xxxxxx ul li
{
	position: relative;
	border-top: 1px solid #446A7E;
}
.el_asideBlock_xxxxxx ul li:hover
{
	background-color: rgba(32,145,201, 0.3);
}
.el_asideBlock_xxxxxx ul li:first-child
{
	border-top: none;
}
.el_asideBlock_xxxxxx ul li a
{
	display: block;
	position: relative;
	padding: 15px 15px 15px 10px;
	font-size: 1.4rem;
	color: #446A7E;
}
.el_asideBlock_xxxxxx ul li a:hover
{
	color: #2091C9;
}
.el_asideBlock_xxxxxx ul li a i
{
	position: absolute;
	top: 50%;
	right: 5px;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
 
/* Вложенные списки */
 
.el_asideBlock_xxxxxx ul ul
{
	display: none;
	position: absolute;
	border: 1px solid #446A7E;
	background-color: #FFFFFF;
	top: -1px;
	left: 100%;
	width: 300px;
}
.el_asideBlock_xxxxxx ul li:hover > ul
{
	display: block;
}
.el_asideBlock_xxxxxx ul li ul:hover
{
	box-shadow: 0px 0px 10px rgba(68,106,126, 0.5);
}