Drop down submenu opening overlapping the main menu with back button - html

Question

I kindly ask you for help, I would like the submenus to open in slide in the same screen overlapping in the drop vertical menu, because I have many rows and submenus to insert and use the back button to go back in the submenus when they are overlapped.
They do not have to open in cascade like it is now, or sideways, but when I click car the submenu must completely overlap the main menu, and then use the back buttons to go back in the menu go, is it possible?
the back button does not work for me..
I would like the submenus to open to pages, then overlapping each other and using the back button to go back through the menus
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
.sidenav {
height: 250px;
width: 300px;
z-index: 1;
top: 200px;
left: 0;
background-color: #444;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a,
.dropdown-btn {
padding: 14px 8px 6px 16px;
text-decoration: none;
font-size: 17px;
color: #8c8c8c;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
margin-left: 2px;
}
.sidenav a:hover,
.dropdown-btn:hover {
color: #f1f1f1;
background: #555;
border-left: 3px solid #f1d120;
margin-left: -1px;
}
.main {
margin-top: -460px;
margin-left: 310px;
font-size: 20px;
padding: 10px 50px;
}
.active {
background-color: grey;
color: white;
}
.dropdown-container {
display: none;
background-color: #4c4c4c;
padding-left: 8px;
}
<div class="sidenav">Brand <button class="dropdown-btn">Car <strong>
</strong> </button>
<div class="dropdown-container">° renault ° citoren</div>
<br /><br /><br />
<button>back</button>