边栏下拉到侧面Bootstrap

Question

我通过教程网站找到了一个侧栏，我非常喜欢！我也调整了一点，这就像我想要的那样。我将添加我的代码：

风格：

body {
font-family: "Lato", sans-serif;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #4b2177;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 4px 4px 4px 32px;
text-decoration: none;
font-size: 16px;
color: #FFFFFF;
display: block;
transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
color: #FFFFFF;
}

.sidenav .closebtn {
    position: absolute;
    top: 45px;
    right: 0px;
    font-size: 24px;
    margin-left: 50px;
}

#main {
transition: margin-left .5s;
padding: 16px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

导航器：

<div id="mySidenav" class="sidenav">
    <a></a>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <hr>
    <a href="{{ url('/documentation') }}">Documentation</a>
    <a href="{{ url('/userguide') }}">User Guide</a>
    <hr>
</div>

和JS：

<script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "150px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft= "0";
    }
</script>

其他HTML：

<span style="font-size:16px;cursor:pointer;color:#4b2177" onClick="openNav()">&#9776; open</span>

我想在sidenav中使用某种下拉菜单。所以我看了一下，我发现这个侧边栏有下拉到侧面（见图）。我尝试使用网站上的代码：http://bootstrap-layout.themekit.io/sidebar-menu/dropdown.html

<li class="sidebar-menu-item">
    <a href="#" class="sidebar-menu-button" data-toggle="sidebar-dropdown">Reports</a>

    <!-- Submenu -->
    <ul class="sidebar-submenu">
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Another menu item</a>
      </li>
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Regular menu item</a>
      </li>
    </ul>
  </li>

但不幸的是，它不像下拉列表那样工作。它只显示<li>中的所有元素。