Vertical menu with sub menu that would display within height of parent menu

Question

I'm trying to create a vertical menu with shows a sub menu on hover. Also the sub-menu must stay within the height of the vertical menu. I kinda did it

I wanted the submenu to stay for bit when you hover on its parent li. I placed a transition delay on it. But when I hover on the submenu it displays the last submenu of the vertical menu. I cant seem to find where to fix it.

Here's my code:

 var checkBox = document.getElementById("label_check"); checkBox.addEventListener("mouseover", function(event) { setTimeout(function() { document.getElementById('label_check').click(); }, 500); }, false); 

 * { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #e9ecef; height: 1200px; } .menu-wrapper { width: 300px; margin: 20px auto; list-style-type: none; background: white; border-radius: 8px; -webkit-box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .menu-wrapper .menu-header { height: 50px; line-height: 50px; background: #3a98f0; border-top-right-radius: 8px; border-top-left-radius: 8px; color: white; font-weight: bold; text-transform: uppercase; } .menu-wrapper .menu-header p { padding-left: 10px; } .menu-wrapper .menu-list .parent-menu { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 0 20px; } .menu-wrapper .menu-list ul { list-style-type: none; background: white; } .menu-wrapper .menu-list ul a { display: block; height: 100%; text-decoration: none; color: black; padding-left: 10px; position: relative; -webkit-transition: background .3s; transition: background .3s; } .menu-wrapper .menu-list ul.sub-menu { border-radius: 2px; -webkit-box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .menu-wrapper .menu-list ul .has-sub>a:after { content: ' >'; position: absolute; right: 10px; } .menu-wrapper .menu-list ul li.has-sub:first-child>ul.sub-menu { position: absolute; left: 290px; top: 0; padding-left: 5px; opacity: 0; width: 250px; transition: 0s .03s; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4)>ul.sub-menu { position: absolute; left: 290px; top: initial; bottom: -50px; padding-left: 5px; opacity: 0; width: 250px; transition: 0s .03s; } .menu-wrapper .menu-list ul li.has-sub:first-child>ul.sub-menu:before { content: ''; display: block; width: 0; height: 0; position: absolute; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 18px solid white; left: -12px; top: 10px; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4)>ul.sub-menu:before { content: ''; display: block; width: 0; height: 0; position: absolute; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 18px solid white; left: -12px; bottom: 55px; } .menu-wrapper .menu-list ul li.has-sub:first-child:hover>ul.sub-menu { opacity: 1; transition: 0s; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4):hover>ul.sub-menu { opacity: 1; transition: 0s; } .menu-wrapper .menu-list li { height: 50px; line-height: 50px; border-bottom: 1px solid #e9ecef; position: relative; } .menu-wrapper .menu-list li.grow ul.bottom-parent-menu>li:last-child { margin-bottom: 50px; } .menu-wrapper .menu-list .grow { position: relative; height: auto; border-top: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .menu-wrapper .menu-list [type="checkbox"] { position: absolute; left: -9999px; } .menu-wrapper .menu-list [type="checkbox"]:checked~ul { display: block; } .menu-wrapper .menu-list [type="checkbox"]:checked+label { position: absolute; bottom: 0; } .menu-wrapper .menu-list [type="checkbox"]:checked+label:before { content: 'Less...'; font-weight: 600; } .menu-wrapper .menu-list label { display: block; width: 100px; height: 50px; cursor: pointer; position: relative; background: white; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .menu-wrapper .menu-list label:before { position: absolute; content: 'More...'; left: 10px; font-weight: 600; } .menu-wrapper .menu-list label:after { position: absolute; } .menu-wrapper .menu-list input[type="checkbox"]~ul { width: 100%; display: none; } 

 <div class="menu-wrapper"> <div class="menu-header"> <p>&#9776; Categories</p> </div> <div class="menu-list"> <ul class="parent-menu"> <li class="has-sub"> <a href="#">One</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li class="has-sub"> <a href="#">Four</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li class="grow"> <input type="checkbox" id="check_id"> <label id="label_check" for="check_id"></label> <ul class="bottom-parent-menu"> <li class="has-sub"> <a href="#">Five</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li><a href="#">Six</a></li> <li><a href="#">Seven</a></li> <li class="has-sub"> <a href="#">Eight</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> </ul> </li> <li class="has-sub"> <a href="#">Nine</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> </ul> </li> <li class="has-sub"> <a href="#">Ten</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> </ul> </li> </ul> </div> </div> 

Answer 1

So, You must on hover display:block instead of opacity:1; and add padding to li instead of ul

 var checkBox = document.getElementById("label_check"); checkBox.addEventListener("mouseover", function(event) { setTimeout(function() { document.getElementById('label_check').click(); }, 500); }, false); 

 * { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { background: #e9ecef; height: 1200px; } .menu-wrapper { width: 300px; margin: 20px auto; list-style-type: none; background: white; border-radius: 8px; -webkit-box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .menu-wrapper .menu-header { height: 50px; line-height: 50px; background: #3a98f0; border-top-right-radius: 8px; border-top-left-radius: 8px; color: white; font-weight: bold; text-transform: uppercase; } .menu-wrapper .menu-header p { padding-left: 10px; } .menu-wrapper .menu-list .parent-menu { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding: 0; } .menu-wrapper .menu-list ul { list-style-type: none; background: white; } .menu-wrapper .menu-list ul a { display: block; height: 100%; text-decoration: none; color: black; padding-left: 10px; position: relative; -webkit-transition: background .3s; transition: background .3s; } .menu-wrapper .menu-list ul.sub-menu { border-radius: 2px; -webkit-box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .menu-wrapper .menu-list ul .has-sub>a:after { content: ' >'; position: absolute; right: 10px; } .menu-wrapper .menu-list ul li.has-sub:first-child>ul.sub-menu { position: absolute; left: 310px; top: 0; padding-left: 5px; display: none; width: 250px; transition: 0s .03s; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4)>ul.sub-menu { position: absolute; left: 310px; top: initial; bottom: -50px; padding-left: 5px; display: none; width: 250px; transition: 0s .03s; } .menu-wrapper .menu-list ul li.grow { padding: 0; } .menu-wrapper .menu-list ul li.grow>ul li { padding: 0 40px !important; } .menu-wrapper .menu-list ul li.has-sub:first-child>ul.sub-menu:before { content: ''; display: block; width: 0; height: 0; position: absolute; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 18px solid white; left: -12px; top: 10px; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4)>ul.sub-menu:before { content: ''; display: block; width: 0; height: 0; position: absolute; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-right: 18px solid white; left: -12px; bottom: 55px; } .menu-wrapper .menu-list ul li.has-sub:first-child:hover>ul.sub-menu { display: block; transition: 0s; } .menu-wrapper .menu-list ul li.has-sub:nth-last-child(-n+4):hover>ul.sub-menu { display: block; transition: 0s; } .menu-wrapper .menu-list li { height: 50px; line-height: 50px; border-bottom: 1px solid #e9ecef; position: relative; padding: 0 20px } .menu-wrapper .menu-list li.grow ul.bottom-parent-menu>li:last-child { margin-bottom: 50px; } .menu-wrapper .menu-list .grow { position: relative; height: auto; border-top: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .menu-wrapper .menu-list [type="checkbox"] { position: absolute; left: -9999px; } .menu-wrapper .menu-list [type="checkbox"]:checked~ul { display: block; } .menu-wrapper .menu-list [type="checkbox"]:checked+label { position: absolute; bottom: 0; } .menu-wrapper .menu-list [type="checkbox"]:checked+label:before { content: 'Less...'; font-weight: 600; } .menu-wrapper .menu-list label { display: block; width: 100px; height: 50px; cursor: pointer; position: relative; background: white; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .menu-wrapper .menu-list label:before { position: absolute; content: 'More...'; left: 10px; font-weight: 600; } .menu-wrapper .menu-list label:after { position: absolute; } .menu-wrapper .menu-list input[type="checkbox"]~ul { width: 100%; display: none; } 

 <div class="menu-wrapper"> <div class="menu-header"> <p>&#9776; Categories</p> </div> <div class="menu-list"> <ul class="parent-menu"> <li class="has-sub"> <a href="#">One</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li class="has-sub"> <a href="#">Four</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li class="grow"> <input type="checkbox" id="check_id"> <label id="label_check" for="check_id"></label> <ul class="bottom-parent-menu"> <li class="has-sub"> <a href="#">Five</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub Four</a></li> </ul> </li> <li><a href="#">Six</a></li> <li><a href="#">Seven</a></li> <li class="has-sub"> <a href="#">Eight</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> </ul> </li> <li class="has-sub"> <a href="#">Nine</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> </ul> </li> <li class="has-sub"> <a href="#">Ten</a> <ul class="sub-menu"> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> <li><a href="#">Sub Three</a></li> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> </ul> </li> </ul> </div> </div> 

jsfiddle