Sidebar not coming out when hovered

Question

I want the sidebar to comeout when hovered over class '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>

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;
}

that . Doesn't cause the problem because you didn't use product class directly — Vignesh A, Apr 22 '20 at 16:01
it is detecting that product is getting hovered since i check with changing the color its working it not detecting .sidebar — brohxa, Apr 22 '20 at 16:05
put your whole code in jsfiddle or codepen. it will be to helpful solve your problem more way easier — Vignesh A, Apr 22 '20 at 16:32
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element. [link](https://stackoverflow.com/a/16473404/9744379) — Vignesh A, Apr 22 '20 at 17:04
if you want to affect sidebar while hovering `li` the sidebar and li must me contained in same element. if you didn't want to restructure your html code you can simply use js — Vignesh A, Apr 22 '20 at 17:06
ok got it it should be in the same parent rather than diffrent div. — brohxa, Apr 22 '20 at 18:09

score 0 · Accepted Answer · answered Apr 22 '20 at 16:37

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><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>

but i want it to work with pure css. I know i could do with JS Thanks for the reply though — brohxa, Apr 22 '20 at 17:02
You can follow the link given in the answer to achieve that with pure css — LFC, Apr 22 '20 at 17:09

Sidebar not coming out when hovered

1 Answers1