html - CSS show div on hover -

this css

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

so want "header_under" appear on website on hover. seems not work

html:

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

and

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

your html needs structured match css , work.

the tilde (~) operator requires sibling connection 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>