I have a sidebar that slides to the right when hovering the cursor, I need that when hovering the cursor over sections that have sub-sections on the right side sub-sections appear as well as the main sidebar
<!DOCTYPE html>
<html class="menu">
<html>
<head>
<meta charset="utf-8"/>
<title>Side Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<style>
.logo{
}
.fa-solid {
position: relative;
display: table-cell;
width: 55px;
text-align: center;
top:25px;
font-size:20px;
}
.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
}
.main-menu {
background:#808080;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:80px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
opacity:1;
}
.main-menu li>a {
position:relative;
width:400px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#ffffff;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
height: 65px;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#DAA520;
text-shadow: 0px 0px 0px;
}
.sub-menu {
display: none;
position: absolute;
top: 0;
left: 100%;
background: #808080;
width: 200px; /* или другая ширина по вашему выбору */
}
.main-menu li:hover .sub-menu {
display: block;
}
</style>
</head>
<body>
</div>
<nav class="main-menu">
<div>
<ul>
<li>
<a class="logo" href="#">
<i class="fa-solid fa-burger"></i>
<span class="nav-text">Menu</span>
</a>
</li>
</ul>
</div>
<ul>
<li>
<a href="/">
<i class="fa-solid fa-house"></i>
<span class="nav-text">Main</span>
</a>
</li>
<li>
<a href="/">
<i class="fa-solid fa-circle-info"></i>
<span class="nav-text">About</span>
</a>
</li>
<li>
<a href="/">
<i class="fa-solid fa-barcode"></i>
<span class="nav-text">Rooms</span>
</a>
<ul class="sub-menu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li>
<a href="/">
<i class="fa-solid fa-wine-glass"></i>
<span class="nav-text">Meal</span>
</a>
</li>
<li>
<a href="/">
<i class="fa-solid fa-children"></i>
<span class="nav-text">For children</span>
</a>
</li>
<li>
<a href="/">
<i class="fa-solid fa-list-check"></i>
<span class="nav-text">Services</span>
</a>
</li>
<li>
<a href="/">
<i class="fa-solid fa-address-book"></i>
<span class="nav-text">Contacts</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
But my subdivisions appear superimposed on top of the sidebar