Alireza Balouch

Here is an good example how to hide layers and show them on mouse over effect.

Here is how the CSS part looks like:

 
div#testlinks {
  position: absolute;
  top: 20px; left: 12px; width: 166px;
  font: 12px Verdana, sans-serif;
}
div#testlinks a {
  display: block; font: bold 1em sans-serif;
  padding: 5px 10px; margin: 0 0 1px;
  border-width: 0;
  text-decoration: none; color: #FFC;
  background: #444;
  border-right: 5px solid #505050;
}
div#testlinks a:hover {
 color: #411; background: #AAA;
 border-right: 5px double white;
}
div#testlinks a span {display: none;}
div#testlinks a:hover span {
 display: block;
 position: absolute; top: 180px; left: 0; width: 125px;
 padding: 5px; margin: 10px; z-index: 100;
 color: #AAA; background: black;
 font: 10px Verdana, sans-serif; text-align: center;
}
 

I just set the span layer inside the my div layer to be hidden and using "a:hover span" to show it.

And here is how the HTML part looks like:

 
<a href="#">Home
   <span>
This is the part that is showing in the box below
</span></a>
 

Demo: CSS pop-ups