Appraitre et disparaitre un div

Bonjour,

j'ai un menu déroulant. chaque onglet me revoie vers une div.
Voila le code HTML et CSS:
------------------------HTML
<ul id="menu">
<li><a href="#contenu1" >Acceil</a></li>
<li>
<a href="#contenu2" id="acceil">Ajouter un lien</a></li>
<li>
<a href="#contenu3" id="telechargement">Télechargement</a>
</li>
<li>
<a href="#contenu5" id="membre">Gestion membre</a>
</li>
<li>
<a href="#contenu7" id="recherche">Recherche</a>
</li>
<li>
<a href="index.php" id="deconnection" onclick="<?php session_destroy()?>">Deconnection</a>
</li>
</ul>


-----------------------CSS :

#contenu1,#contenu2, #contenu3, #contenu4, #contenu5,#rech,#contenu6,#contenu7{
/* padding: 0px 1px 1px 1px;*/

min-height:1000px;
width: 1250px;;
height:auto;
background-color: rgb(247, 247, 247);
-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-webkit-box-shadow: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
opacity:0;
z-index:1;
}
#contenu {
position:relative;
clear:both;
width: 1150px;
height:auto;

}
#contenu1{
opacity: 1;
}
#contenu1:target,#contenu7:target,#contenu2:target,#rech:target,#contenu6:target, #contenu3:target, #contenu4:target, #contenu5:target {
opacity: 1;
z-index: 2;
}
_________________________________________________________

Le contenu de 1er div "contenu1" est plus grand que les autres div. et quand je clique sur le div "contenu2" ou autres, le contenu de div "contenu1" apparaisse.

Je veux disparaître div "contenu1" lorsque je clique sur les autres div. et l'apparaître lorsque je clique sur l'onglet de acceuil (div de " contenu1").

J'attend vos commentaire. merci d'avance

Cordialement