Боковая панель не выходит, когда завис

Question

Я хочу, чтобы боковая панель появлялась при наведении курсора на класс 'product'

<div class="sidebar">
<nav class="sidebar-nav">
    <ul>
        <li><a href="#">Overview</a></li>
        <li><a href="#">Website Analytics</a></li>
        <li><a href="#">Connected Services</a></li>
        <li><a href="#">About Me</a></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>
<a href="#" class="order-now"> Order-Now</a>
<div class="icons">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
    </div>
<header>
    <h3 class=".logo"><i class="fab fa-pied-piper-square"></i>SKILLREP</h3>
    <nav class="navigation1">
        <ul>
            <li><a href="#" class=".product">PRODUCT <i class="fas fa-chevron-down"></i></a></li>
            <li><a href="#">TEMPLATE <i class="fas fa-chevron-down"></i></a></li>
            <li><a href="#">RESOURCE <i class="fas fa-chevron-down"></i></a></li>
        </ul>
    </nav>

Я поместил боковую панель сверху: -40px, используя абсолютную позицию, которая становится невидимой, когда я наводю указатель мыши на продукт, но это не так. выходит на главной странице.

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

Хотя это может быть достигнуто в соответствии с Изменить другой стиль Div при наведении курсора

Я не рекомендую делать это таким образом. Лучшим подходом было бы использовать Javascript для достижения эффекта. Сначала скройте боковую панель, используя display: none; в CSS и затем динамически изменить его с помощью JS.

function displaySidebar(x){
x.style.display="block";
}

<div class="sidebar" onmouseover="displaySidebar(this)">
        <nav class="sidebar-nav">
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Website Analytics</a></li>
                <li><a href="#">Connected Services</a></li>
                <li><a href="#">About Me</a></li>
            </ul>
        </nav>
        </div>