Блок с вложенными списками
<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>
.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); }