CSS show div on hover

Question

This is my CSS

.header_under{
    display: none;
    width: 300px;
    height: 150px;
    float: left;
    background: red
}
.show:hover ~ .header_under{
    display: block;
}

So what I want is the "header_under" to appear on the website on hover. But it seems not to work

HTML:

<li class="show"><a href='#'><span>Games4u</span></a></li>

And

<div class="bildspel">
    <div id="header_under"></div>
</div>

Answer 1

Your HTML needs to be structured to match the CSS and it will work.

The tilde (~) operator requires a sibling connection with the target:

#header_under{
    display: none;
    width: 300px;
    height: 150px;
    background: red
}
.show:hover ~ #header_under{
    display: block;
}

<ul>
    <li class="show">
        <a href='#'><span>Games4u</span></a>
    </li>
    <div id="header_under">dasasdadssad</div>
</ul>