How to fix the second list so that it falls out normally?

a { text-decoration: none; color: inherit; } ul { margin: 0; padding: 0; list-style-type: none; } .main-menu{ position: relative; } .main-menu .sub-menu{ position: absolute; } .menu_item { position: relative; width: 20%; box-sizing: border-box; color: #fff; padding: 0 10px; background: green; } .menu_item a { line-height: 35px; display: block; } .menu_item:hover { color: #000; background: #f3f3f3; } .menu_item:hover > .sub-menu { display: block; } .menu_item:hover > .sub-menu-2 { display: block; } .sub-menu { left: 99%; margin-top: -32px; width: 100%; max-width: 12em; display: none; } .sub-menu .menu_item { width: 100%; } .sub-menu-2 { left: 120%; margin-top: -35px; width: 100%; max-width: 12em; display: none; } 
 <ul class="main-menu"> <li class="menu_item"> <a href="">Menu 1></a> <ul class="sub-menu"> <li class="menu_item"> <a href="">Menu 1.1</a></li> <li class= "menu_item"> <a href="">Menu 1.2</a> </li> <li class="menu_item"> <a href=""> Menu 1.3 > </a> <ul class="sub-menu-2"> <li class= "menu_item "> <a href="">Menu 1.1.1</a> </li> <li class= "menu_item"> <a href="">Menu 1.2.2</a> </li> <li class= "menu_item"> <a href="">Menu 1.3.3</a> </li> <li class= "menu_item"> <a href="">Menu 1.2.4</a> </li> <li class= "menu_item"> <a href="">Menu 1.3.5</a> </li> </ul> </li> </ul> <li class="menu_item"> <a href="">Menu 2</a> </li> <li class="menu_item"> <a href="">Menu 3</a> </li> <li class="menu_item"> <a href="">Menu 4</a> </li> <li class="menu_item"> <a href="">Menu 5</a> </li> </ul>

    1 answer 1

    Will fit?

     a { text-decoration: none; color: inherit; } ul { margin: 0; padding: 0; list-style-type: none; } .main-menu{ position: relative; } .main-menu .sub-menu{ position: absolute; } .menu_item { position: relative; width: 20%; box-sizing: border-box; color: #fff; padding: 0 10px; background: green; } .menu_item a { line-height: 35px; display: block; } .menu_item:hover { color: #000; background: #f3f3f3; } .menu_item:hover > .sub-menu { display: block; } .menu_item:hover > .sub-menu-2 { display: block; } .sub-menu { left: 99%; margin-top: -32px; width: 100%; max-width: 12em; display: none; } .sub-menu .menu_item { width: 100%; } .sub-menu-2 { left: 100%; margin-top: -35px; width: 100%; max-width: 12em; display: none; position:absolute; } 
     <ul class="main-menu"> <li class="menu_item"> <a href="">Menu 1></a> <ul class="sub-menu"> <li class="menu_item"> <a href="">Menu 1.1</a></li> <li class= "menu_item"> <a href="">Menu 1.2</a> </li> <li class="menu_item"> <a href=""> Menu 1.3 > </a> <ul class="sub-menu-2"> <li class= "menu_item "> <a href="">Menu 1.1.1</a> </li> <li class= "menu_item"> <a href="">Menu 1.2.2</a> </li> <li class= "menu_item"> <a href="">Menu 1.3.3</a> </li> <li class= "menu_item"> <a href="">Menu 1.2.4</a> </li> <li class= "menu_item"> <a href="">Menu 1.3.5</a> </li> </ul> </li> </ul> <li class="menu_item"> <a href="">Menu 2</a> </li> <li class="menu_item"> <a href="">Menu 3</a> </li> <li class="menu_item"> <a href="">Menu 4</a> </li> <li class="menu_item"> <a href="">Menu 5</a> </li> </ul>