Change style parent submenu

Question

I have a menu with a submenus, which are displayed in a panel above the parent menu as in the example below. I want to transform the submenu to a simple menu which is displayed at the bottom of the parent. the code of the example I posted it here:

https://jsfiddle.net/oj9u7e8t/.

whene i click in the Menu 2 I dont want to show the submenu in the panel but above the parent menu.

  document.querySelectorAll("li:not(.none)").forEach(function(item) {
            item.addEventListener("click", function(ev) {
                ev.target.closest("li").classList.add("show");
            });
        });
    
    document.querySelectorAll(".main-sidebar .sidebar-menu .menu-header").forEach(function(item) {
            item.addEventListener("click", function(ev) {
                ev.target.closest("li.treeview").classList.remove("show");
                ev.stopPropagation();
            });
        });

             li .tree-menu-wrapper {
            position: fixed;
            display: block;
            top: 0;
            bottom: 0;
            padding: 0;
            z-index: 1;
            overflow-y: auto;
            visibility: hidden;
            box-sizing: initial;
            width: max(15%, 12rem);
            left: calc(min(-15%, -12rem) - 1px); /* -1 to avoid intersection */
            box-shadow: #a8b8c825 6px 3px 9px 0px;
            background-color: var(--bs-menu-alt-bg, #ffffff);
            transition: left .3s ease, visibility 0s linear .3s;
        }

         li.show .tree-menu-wrapper {
            left: 0;
            visibility: visible;
            transition: left .3s ease, visibility;
        }

        [dir="rtl"]  li .tree-menu-wrapper {
            right: calc(min(-15%, -12rem) - 1px); /* -1 to avoid intersection */
            transition: right .3s ease, visibility 0s linear .3s;
            left: initial;
        }

        [dir="rtl"]  li.show .tree-menu-wrapper {
            transition: right .3s ease, visibility;
            left: initial;
            right: 0;
        }

         li .tree-menu-wrapper .menu-header {
            background-color: var(--bs-menu-bg, #30a0e0);
            color: var(--bs-menu, #ffffff);
            justify-content: center;
            align-items: center;
            position: sticky;
            display: flex;
            height: 2.5rem;
            z-index: 5;
            top: 0;
        }

         li .tree-menu-wrapper .menu-header a {
            color: var(--bs-menu, #ffffff);
            text-align: center;
            display: block;
            width: 100%;
        }

         li .tree-menu-wrapper .menu-header a:hover {
            color: var(--bs-menu, #ffffff);
        }

         li .tree-menu-wrapper .menu-header .close {
            position: absolute;
            right: 1rem;
        }

         li .tree-menu-wrapper .menu-header .close:before {
            font: normal normal normal 14px/1 FontAwesome;
            content: "\f00d";
        }

         li .tree-menu-wrapper .filter {
            padding: 0.5rem;
        }

         li .tree-menu-wrapper .filter input {
            width: 100%;
        }

         li .tree-menu li {
            background-color: var(--bs-menu-alt-bg, #ffffff);
            overflow-x: hidden;
        }

         li .tree-menu {
            display: block;
            position: relative;
            color: var(--bs-secondary, #707880);
            background-color: var(--bs-menu-alt-bg, #ffffff);
            box-sizing: initial;
            list-style: none;
            overflow-y: auto;
            padding: 0;
            margin: 0 0.5rem;
        }

         li .tree-menu .tree-menu {
            margin-left: 1rem;
            margin-right: 0;
        }

        [dir="rtl"]  li .tree-menu .tree-menu {
            margin-right: 1rem;
            margin-left: 0;
        }

         li .tree-menu .more {
            text-align: center;
        }

         li .tree-menu a:hover,
         li .tree-menu li:hover {
            color: var(--bs-secondary-light, #9098a0);
        }

         li .tree-menu a {
            padding: 0.5rem;
            display: inline-block;
            text-decoration: none;
            width: calc(100% - 2rem);
            color: var(--bs-secondary, #707880);
        }

         li .tree-menu li.active > a {
            border-left: 3px solid var(--bs-secondary-light, #9098a0);
        }

        [dir="rtl"]  li .tree-menu li.active > a {
            border-right: 3px solid var(--bs-secondary-light, #9098a0);
            border-left: 0;
        }

         li .tree-menu .icon-open,
         li .tree-menu .icon-close,
         li .tree-menu .icon-loading {
            font: normal normal normal 14px/1 FontAwesome;
            padding: 0.5rem;
            font-size: 80%;
            width: 2rem;
        }

HTML:

            <nav class="main-sidebar">
           <div class="sidebar-wrapper">
              <ul class="sidebar-menu">
                 <li class="menuitem-dashboard active">
                    <a href="#" title="Dashboard">
                    <i class="icon"></i>
                    <span class="title">Menu 1</span>
                    </a>
                 </li>
                 <li class="treeview menuitem-sales after">
                    <span>
                    <i class="icon"></i>
                    <span class="title">Menu 2</span>
                    </span>
                    <div class="tree-menu-wrapper">
                       <div class="menu-header">
                          <a href="#">Title</a>
                          <span class="close"></span>
                       </div>
                       <ul class="tree-menu">
                          <li class="menuitem-order">
                             <a href="#" >
                             <i class="icon"></i>
                             <span class="name">Sub menu 1</span>
                             </a>
                          </li>
                          <li class="menuitem-subscription">
                             <a href="#" title="Subscription">
                             <i class="icon"></i>
                             <span class="name">Sub menu 2</span>
                             </a>
                          </li>
                       </ul>
                    </div>
                 </li>
                 <li class="menuitem-dashboard active">
                    <a href="#" title="Dashboard">
                    <i class="icon"></i>
                    <span class="title">Menu 3</span>
                    </a>
                 </li>
              </ul>
           </div>
        </nav>
  

Answer 1

Just make li.treeview { position: relative; }li .tree-menu-wrapper { position: absolute; top: 100%; bottom: inherit; }