How to make two submenu in sidebar - html

Question

I want to create 2 submenus when the menu in the sidebar is clicked
Here what i've done
$(document).ready(function () {
$("[data-toggle]").click(function () {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$('.parent').click(function () {
$('.submenu').toggle('visible');
});
});
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
right: 0;
-webkit-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
transition: right 0.4s ease-in-out;
}
.container.open-sidebar {
right: 240px;
}
#sidebar {
position: absolute;
right: -240px;
background: #DF314D;
width: 240px;
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul li {
margin: 0;
}
#sidebar ul li a {
padding: 15px 20px 15px 35px;
font-size: 16px;
font-weight: 100;
color: white;
text-decoration: none;
display: block;
border-bottom: 1px solid #C9223D;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
#sidebar li:hover {
background: #C9223D;
border-radius: 4px;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content{
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
font-weight: 100;
}
.main-content .content p{
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: #DF314D;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: right;
}
.main-content #sidebar-toggle .bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
margin-bottom: 0;
}
.main-content #sidebar-toggle .bar{
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child{
margin-bottom: 0;
}
.menu a.home {
display: inline-block;
background: url(../imagenes/bpi.png) no-repeat 4px 10px;
}
.menu a.explore {
display: inline-block;
background: url(../imagenes/gasi.png) no-repeat 4px 10px;
}
.menu a.users {
display: inline-block;
background: url(../imagenes/bicici.png) no-repeat 4px 10px;
}
.menu a.signout {
display: inline-block;
background: url(../imagenes/bai.png) no-repeat 4px 10px;
}
#sidebar .menu .submenu {
display: none;
}
#sidebar ul li ul.visible{
display: block;
}
.submenu a.home {
display: inline-block;
background: url(../imagenes/bpi.png) no-repeat 4px 10px;
}
.submenu a.users {
display: inline-block;
background: url(../imagenes/bicici.png) no-repeat 4px 10px;
}
.submenu a.signout {
display: inline-block;
background: url(../imagenes/bai.png) no-repeat 4px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div id="sidebar">
<ul class="menu">
<li class="parent">Home ></li>
<ul class="submenu">
<li>Home 11</li>
<li>Home 12</li>
<li>Home 13</li>
</ul>
<li>Explore</li>
<li> Users</li>
<li class="parent"> Sign Out ></li>
<ul class="submenu">
<li>Home 11</li>
<li>Home 12</li>
<li>Home 13</li>
</ul>
</ul>
</div>
<div class="main-content">
<a href="#" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="content">
</div>
</div>
</div>