Javascript 折叠显示子菜单时的侧边栏

我按照#4 Advanced sidebar中的教程操作边栏函数。我目前面临的问题是在折叠和悬停期间，子菜单没有如下图所示很好地显示

有人能帮我吗？我对css非常陌生。我希望子菜单与其父菜单对齐，并且我希望显示标题以及子菜单内的列表，如下图所示

在开始之前，我有几个问题：-

为什么子菜单显示得比其父菜单稍低

有什么建议或方法可以让我玩/提高我对css的理解吗

这是我的css

/*    wrapper stretch value will equalize both page content and sidebar height.
As the content increases, sidebar height dynamically increases.*/
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
}

/* Shrinking the sidebar from 250px to 80px and center aligining its content*/
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

.components:hover {
    display: block;
}
/*------------On hover will show submenu when collapse---------------*/
#sidebar.active > .components > li:hover .collapse {
    background-color: #1E88E5;
    display: block;
    list-style: outside none none;
    margin: 0;
    padding: 0 20px;
    position: absolute;
    z-index: 99999;
    left: 222px;
}
/*------------End On hover willshow submenu when collapse---------------*/

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    color: #fff;
    transition: all 0.3s;
}

    #sidebar .sidebar-header {
        padding: 20px;
        background: #1E88E5;  /*This is template color*/
        border-bottom-color: coral;
    }

    #sidebar ul.components {
        padding: 20px 0;
   }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

    #sidebar ul li a:hover {
        color: #FFB22B;
    }


ul ul a sidebar {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

Jquery

$('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

    // Collapse click
    $('[data-toggle=sidebar-colapse]').click(function () {
        SidebarCollapse();
    });

    function SidebarCollapse() {
        $('.menu-collapsed').toggleClass('d-none');
        $('#dropdown-toggle').toggleClass('d-none');
        $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
    }  

HTML下面这两个代码，第一个是按钮代码，第二个是侧边栏代码，第二个是ipsum

<div class="row page-titles">
<div class="col-md-12 col-12 align-self-center">
    <div class="row">
        <div class="row col-8 mt-3">
            <div class="col-1">
                <button type="button" id="sidebarCollapse" class="btn btn-info" data-toggle="sidebar-colapse">
                    <i class="fas fa-align-left"></i>
                </button>
            </div>
        </div>
    </div>
</div>

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

---

谢谢

你能通过组合所有这些代码（html、css和js）上传一个工作演示吗？你能通过组合所有这些代码（html、css和js）上传一个工作演示吗？

<div class="d-flex justify-content-start" id="main">
<div class="wrapper nav">
    <!-- Sidebar  -->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li>
                <a id="SalesPer" href="#SalesPerformanceSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    <i class="fas fa-chart-area"></i>
                    <span class="menu-collapsed">Chart</span>
                </a>
                <ul class="collapse list-unstyled" id="SalesPerformanceSubmenu">
                    <li>
                        <a href="#">Chart1</a>
                    </li>
                    <li>
                        <a href="#">Chart2</a>
                    </li>
                    <li>
                        <a href="#">Chart3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#contactsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    <i class="fas fa-address-card"></i>
                    <span class="menu-collapsed">People</span>
                </a>
                <ul class="collapse list-unstyled" id="contactsSubmenu">
                    <li>
                        <a href="#">People1</a>
                    </li>
                    <li>
                        <a href="#">People2</a>
                    </li>
                    <li>
                        <a href="#">People3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#documentSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    <i class="fas fa-laptop"></i>
                    <span class="menu-collapsed">Activities</span>
                </a>
                <ul class="collapse list-unstyled" id="documentSubmenu">
                    <li>
                        <a href="#">Activities1</a>
                    </li>
                    <li>
                        <a href="#">Activities2</a>
                    </li>
                    <li>
                        <a href="#">Activities3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<div class="row" id="MainCardDiv">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>