Vertical menu. The parent has a pseudo-class, he needs to remove a height equal to the height of the last child

 $(".collection-menu > li .item-link").click(function () { $(this).parent('.collection-menu > li').find('.sub-menu').slideToggle("200"); $(this).find('.icon i').toggleClass('rotate-icon'); $(this).parent().toggleClass('active-item'); }); 

 .collection-menu { width: 220px; position: relative; list-style: none; margin-left: 20px; padding-left: 25px; font-family: 'Roboto'; font-size: 16px; color: #000; } .collection-menu > li { display: block; position: relative; margin-bottom: 25px; } .collection-menu > li:after { content: ''; position: absolute; top: 10px; left: -26px; height: calc(100% + 25px); width: 2px; border-left: 2px dashed #d3d3d3; } .collection-menu > li:last-child { margin-bottom: 0; } .collection-menu > li:last-child:after { height: 0; } .collection-menu > li:last-child .sub-menu > li:after { content: ''; position: absolute; top: -20px; left: -26px; height: calc(100% + 15px); width: 2px; border-left: 2px dashed #d3d3d3; } .collection-menu > li:last-child .sub-menu > li:last-child:after{ height: 29px; } .collection-menu > li:before { position: absolute; font-family: 'FontAwesome'; top: -2px; font-size: 22px; color: #cecece; transition: all .5s; z-index: 2; } .collection-menu .favorite:before { content: '\f004'; left: -36px; } .collection-menu .design:before { content: '\f111'; left: -35px; } .collection-menu .illustration:before { content: '\f111'; left: -35px; } /* ======================== Arrow-right animation ======================== */ .collection-menu > li .item-link { display: flex; color: #000; text-decoration: none; } .collection-menu > li > .item-link span:first-child { transition: 300ms; } .collection-menu > li > .item-link .icon { position: relative; flex: 1; padding-left: 15px; transition: all .5s; } .collection-menu > li > .item-link .icon i { position: absolute; left: 0; opacity: 0; transition: all .5s; } .collection-menu > li > .item-link:hover .icon i { left: calc(100% - 20px); opacity: 1; } .collection-menu > li > .item-link .item-title .subitems-number { padding-left: 5px; color: #1bb1a5; } .rotate-icon { transform: rotate(90deg); left: calc(100% - 20px) !important; opacity: 1 !important; transition: all .25s; } .collection-menu > li.active-item:before { color: #bd10e0; transition: all 1s; } /* ======================== Arrow-right animation ======================== */ .collection-menu .sub-menu { display: none; list-style: none; padding: 0; font-size: 14px; } .collection-menu .sub-menu li { position: relative; margin-top: 25px; } .collection-menu .sub-menu li:before { content: ''; position: absolute; top: 8px; left: -20px; width: 15px; height: 2px; border-top: 2px dashed #cecece; } .collection-menu .sub-menu li a { color: #000; text-decoration: none; } .collection-menu .sub-menu li:first-child a { color: #1bb1a5; } .user-bookmark .user-title { margin: 0; } /* ---------- Animation for new bookmark ----------- */ .new-bookmark { animation: opacityslow 1s; transition: 1s; } @keyframes opacityslow { 0% {opacity: 0;} 100% {opacity: 1} } /* ---------- Animation for new bookmark ----------- */ 

 <script src="https://use.fontawesome.com/ea0959dcb8.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="collection-menu"> <li class="favorite"> <a href="#close" class="item-link"> <span class="item-title">Favorites<span class="subitems-number">1</span></span> <span class="icon"><i class="zmdi zmdi-arrow-right"></i></span> </a> <ul class="sub-menu"> <li class="add-bookmarks"> <a href="#close">Add bookmarks <i class="zmdi zmdi-plus"></i></a> </li> </ul> </li> <li class="design"> <a href="#close" class="item-link"> <span class="item-title">Design<span class="subitems-number">1</span></span> <span class="icon"><i class="zmdi zmdi-arrow-right"></i></span> </a> <ul class="sub-menu"> <li class="add-bookmarks"> <a href="#close">Add bookmarks <i class="zmdi zmdi-plus"></i></a> </li> </ul> </li> <li class="illustration"> <a href="#close" class="item-link"> <span class="item-title">Illustration<span class="subitems-number">1</span></span> <span class="icon"><i class="zmdi zmdi-arrow-right"></i></span> </a> <ul class="sub-menu"> <li class="add-bookmarks"> <a href="#close">Add bookmarks <i class="zmdi zmdi-plus"></i></a> </li> <li class="user-bookmarks"> <h4 class="bookmark-title">Articles about some especial and wonderfull</h4> <p class="bookmark-descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> </li> </ul> </li> </ul> 

 body{ font-family: sans-serif; font-size: 1em; } .b-menu { max-width: 220px; margin: 15px auto; } .b-menu > li{ margin: 20px 0; padding-left: 40px; position: relative; } .b-menu > li:after{ content: ''; position: absolute; top: 0; left: 11px; width: 2px; height: calc(100% + 40px); border-left: 2px dashed #ccc; } .b-menu > li:last-child:after{ height: 0; } [id^=menu-]{ display: none; } [id^=menu-] + label{ display: block; color: #000; position: relative; } [id^=menu-] + label:before, [id^=menu-] + label:after{ content: ''; position: absolute; top: -3px; left: -40px; z-index: 5; width: 24px; height: 24px; border-radius: 50%; } [id^=menu-] + label:before{ background: #ccc; } [id^=menu-] + label:after{ overflow: hidden; opacity: 0; background: #800080; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transform: scale(0); transform: scale(0); } [id^=menu-]:checked + label:after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); } [id^=menu-] + label:hover{ color: green; } [id^=menu-]:checked + label{ color: #800080; } #menu-1:checked + label ~ .b-submenu-1, #menu-2:checked + label ~ .b-submenu-2, #menu-3:checked + label ~ .b-submenu-3{ max-height: 200px; opacity: 1; } .b-submenu{ opacity: 0; max-height: 0; position: relative; padding-left: 10px; -webkit-transition: 0.6s; transition: 0.6s; } .b-submenu > li{ margin: 10px 0; position: relative; } .b-submenu > li > a{ display: block; position: relative; } .b-submenu > li:before{ content: ''; position: absolute; top: 10px; left: -35px; width: 30px; height: 2px; border-top: 2px dashed #ccc; } .b-menu > li:last-child [id^=menu-] + label ~ .b-submenu > li:after{ content: ''; position: absolute; top: 0; left: -38px; height: 0; width: 2px; border-left: 2px dashed #ccc; -webkit-transition: 0.5s; transition: 0.5s; } .b-menu > li:last-child [id^=menu-]:checked + label ~ .b-submenu > li:after{ height: calc(100% + 10px); } .b-menu > li:last-child [id^=menu-]:checked + label ~ .b-submenu > li:last-child:after{ height: 11px; } 

 <ul class="b-menu"> <li> <input type="checkbox" id="menu-1" name="m" /> <label for="menu-1">menu 1</label> <ul class="b-submenu b-submenu-1"> <li><a href="#">submenu 1.1</a></li> <li><a href="#">submenu 1.2</a></li> <li><a href="#">submenu 1.3</a></li> </ul> </li> <li> <input type="checkbox" id="menu-2" name="m" /> <label for="menu-2">menu 2</label> <ul class="b-submenu b-submenu-2"> <li><a href="#">submenu 2.1</a></li> <li><a href="#">submenu 2.2</a></li> <li><a href="#">submenu 2.3</a></li> </ul> </li> <li> <input type="checkbox" id="menu-3" name="m" /> <label for="menu-3">menu 3</label> <ul class="b-submenu b-submenu-3"> <li><a href="#">submenu 3.1</a></li> <li><a href="#">submenu 3.2</a></li> <li><a href="#">submenu 3.3</a> <p> text text text text text text</p> </li> </ul> </li> </ul>