Rozwijane menu.Problem z układem strony

Witam
Próbuję stawiac pierwsze kroki w webmasterce.Mam następujący problem.Zrobiłem sobie rozwijane menu ale gdy najadę na nie myszką cały układ body mi się zmienia.Chciałbym aby po najechaniu na menu przykrywało resztę elementów.Próbowałem z z-index ale nie działa mi nie wiem co źle robię i gdzie to wstawic.Mam zdefiniowane następujące selektory.#menu,#menu:hover nie mam pojęcia co wykombinowac z tymi z-indexami

Byłoby lepiej, jakbyś podał przynajmniej kawałek kodu...
To tak, jakbym powiedział do Ciebie: kupiłem komputer i nie chce się uruchomić. Jego obudowa jest czarna.

head{
position:absolute;
top 0%;
left: 20%;
right: 20%;
}

body { /* nasza całą strona */
background-color: #FFFFFF; /* kolor strony */
font-family: Verdana, Sans-serif; /* krój czcionki */
font-size: 10px;
position: absolute;
top: 20%;
left: 20%;
right: 20%;

 } /* rozmiar czcionki */

#menu { /* div "menu" */
width: 19%; /* szerokość */
border: 1px solid #D3D3D3; /* obrazmowanie */
height: 30px; /* wysokość */
overflow: hidden;
float: left;
clear: none;

 } /* przycinanie */

#menu:hover { /* najechane menu */
width: 19%; /* szerokość */
height: auto;
position:relative;

 } /* wysokość (wartość musi być 100% lub "auto" */

ul { /* ul */
margin: 0px; /* margines */
padding: 0px;
 } /* odstęp */

li { /* li */
list-style-type: none; /* rodzaj wykazu */
width: 100%} /* szerokość */

li a { /* linki */
text-decoration: none; /* dekoracja linka */
display: block; /* rodzaj wyświetlenia elementów */
width: 100%; /* szerokość */
padding: 5px; /* odległości */
color: #3B3B3B; } /* kolor linka */

li a:hover { /* najechany link */
text-decoration: none; /* dekoracja tekstu */
color: #3B3B3B; /* kolor linka */
width: 100%; /* szerokość */
padding: 5px; /* odległości pomiedzy linkami */
background-color: #F0F0F0
 } /* tło */

p { /* paragraf <p> */
text-align: center;

 }/* tekst wyśrodkowany */
 

Tak to wygląda a menu robie sobie na divach

<div id="menu"> <p>Aktualnosci</p>

  <ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  </ul>

  </div>