Sidebar not coming out when hovered - html

Question

I want the sidebar to comeout when hovered over class 'product'
<div class="sidebar">
<nav class="sidebar-nav">
<ul>
<li>Overview</li>
<li>Website Analytics</li>
<li>Connected Services</li>
<li>About Me</li>
</ul>
</nav>
</div>
<div class="main-back">
<h5>Get Your Own Website <span>Now.</span> </h5>
<p>With Little Investment You can Get High End Website <br> With Responsiveness.</p>
Order-Now
<div class="icons">
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
<header>
<h3 class=".logo"><i class="fab fa-pied-piper-square"></i>SKILLREP</h3>
<nav class="navigation1">
<ul>
<li>PRODUCT <i class="fas fa-chevron-down"></i></li>
<li>TEMPLATE <i class="fas fa-chevron-down"></i></li>
<li>RESOURCE <i class="fas fa-chevron-down"></i></li>
</ul>
</nav>
I placed the sidebar at top:-40px using position absolute which becomes not visible when i hover over the product it is not coming out in the main page.
body .sidebar{
width: 100%;
height: 30vh;
background-color: black;
position: absolute;
top: -30vh;
}
.sidebar .sidebar-nav ul{
display: block;
margin-left: 38vw;
margin-top: 10vh;
}
.sidebar .sidebar-nav ul li a{
color: white;
line-height: 30px;
font-family: 'poppins',sans-serif;
}
body header .navigation1 ul li a:hover .sidebar{
top: 30vh;
}

Answer 1

Although it can be achieved accordingChange other Div style on hover
I don't recommend doing it that way. A better approach would be to use Javascript to achieve the effect.
First hide your sidebar using display:none; in CSS and then change it dynamically via JS.
function displaySidebar(x){
x.style.display="block";
}
<div class="sidebar" onmouseover="displaySidebar(this)">
<nav class="sidebar-nav">
<ul>
<li>Overview</li>
<li>Website Analytics</li>
<li>Connected Services</li>
<li>About Me</li>
</ul>
</nav>
</div>