Probléme de menu deroulant avec div

Résolu/Fermé
mimou2601 Messages postés 82 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 16 mai 2017 - 3 juil. 2013 à 00:03
mimou2601 Messages postés 82 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 16 mai 2017 - 6 juil. 2013 à 05:00
Bonjour,
Mon site contient un menu déroulant et un div qui contient plusieurs div.
Mon problème lorsque je clique sur le menu( qui contient des sous menu) ne marche que lorsque je suis dans le div du contenu1.
==> Pour que mon sous menu marche je dois aller dans le contenue 1 puis je clique sur le menu.

Qui peut m'aider ? merci d'avance :)

Voile le code html:

<!------------------------------------------ Le menu ----------------------------------------------------->
<ul id="menu">
<li >
<a href="#contenu1" id="acceil">Acceil</a>
<ul class="sousMenu">
<li><a href="#contenur1_1">Ajouter un lien</a></li>
<li><a href="#contenur1_2">Modifier un lien</a></li>
<li><a href="#contenur1_3">Supprimer un lien</a></li>
</ul>

</li>
<li>
<a href="#contenu2" id="profile">Profile</a>
</li>
<li>
<a href="#contenu3" id="membre">Gestion des membres</a>
</li>
<li>
<a href="#contenu4" id="recherche">Recherche</a>
</li>
<li>
<a href="#contenu5" id="Deconnection">Deconnection</a>
</li>
</ul>

<!--------------------------------------------Les div ------------------------------------------------------>
<div id="conteneur" style="margin: auto;">
<div id="contenu1">

<div id="contenur1_1"><h3>Remplir le formulaire</h3>
<div id="ajoutLien">

</div>
</div>
<div id="contenur1_2">
<p>contenue1.2</p></div>
<div id="contenur1_3"><p>contenue1.3</p></div>
</div>

<!--fin contenue 1 pour la gestion de lien -->

<div id="contenu2">
<h3>Profile</h3>

</div>
<!--fin contenue 2 pour le profile-->

<div id="contenu3">
<h3>Tous les membres</h3>
</div>
<!--fin contenue 3 pour les membres-->

<div id="contenu4">
<h3>Recherche</h3>

</div>
<!--fin contenue 4 pour la partie recherche-->

<div id="contenu5">
</div>
<!--fin contenue 5 pour la deconnexion-->
</div>


</div>
</div></div>


----------------------------------------------Le CSS --------------------------------------------------------

#conteneur {
width: 900px;
height:auto;
min-height:500px;
/*margin: 0px auto;
padding: 0;*/
position: relative;
clear: both;
}

/* les contenues div*/
#contenu1,#contenu2, #contenu3, #contenu4, #contenu5,#contenur1_1,#contenur1_2,#contenur1_3 {
min-height:500px;
width: 900px;
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;
/*top: 0;
left: 0;*/
opacity:0;
/*-o-transform-property: opacity z-index;
-o-transition-duration: 1s;
transform-property: opacity z-index;
transition-duration: 2s;*/
-webkit-transform-property: opacity z-index;
-webkit-transition-duration: 1s;
z-index:1;
}

#contenu1 {
background: transparent;
z-index:1000;
opacity: 10;
}

/*Pour afficher les div */
#contenu1:target,#contenu2:target, #contenu3:target, #contenu4:target, #contenu5:target,#contenur1_1:target,#contenur1_2:target,#contenur1_3:target {
opacity: 1;
z-index: 2;
}
/*-----------------------------------------------menu-----------------------------------------------------*/
#menu li:hover > ul {
display: block;
}
.sousMenu{
opacity:1;
z-index:1000;
float: left;
position: relative;
background: rgba(45,98,119,0.4);
border: solid 1px #b4b4b4;


}
#menu ul {
display: none;

margin: 0px auto;
padding: 0;
width: 185px;
position: absolute;

background: rgba(45,98,119,0.8); /* le couleur du menu mais avec transparance */
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

#menu ul ul {
left: 181px;
top: -3px;
padding: 8px 20px 10px 20px;
}
#menu ul li {
/*float: none;*/
display:block;
margin: 0px auto;
padding: 0;
}

#menu ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

#menu ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menu ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

#menu:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

ul li {
display: table-cell;
}

ul {


display: table;
width: 902px;
margin: 0px auto;
padding: 0;
background: #2d6277;
-webkit-box-shadow: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li a: link, #menu ul li a:visited {
color: white;
color: transparent;

}
A voir également:

2 réponses

Nacim59 Messages postés 22 Date d'inscription mercredi 26 juin 2013 Statut Membre Dernière intervention 13 août 2013
5 juil. 2013 à 11:18
Salut,

Voici un code qui pourra t'aider ,tu dois l'adapter à ton besoin

#########################################
HTML
#########################################

<div id="menu">
<ul>
<li>
<a href="accueil.html" class="bordureG">Accueil</a></li>
</ul>

<ul>
<li>
<a href="#">Recettes</a>
<ul>
<li><a href="boeuf.html">Boeuf</a></li>
<li><a href="agneau.html">Agneau</a></li>
<li><a href="fruits de mer.html">Fruits de mer</a></li>
<li><a href="volaille.html">Volaille</a></li>
<li><a href="Sucree.html">Sucrée</a></li>
</ul>
</li>
</ul>

<ul>
<li>
<a href="#">Recettes video</a>
<ul>
<li><a href="fried rice.html">Fried Rice</a></li>
<li><a href="poulet tandoori.html">Poulet Tandoori</a></li>

</ul>
</ul>

<ul>
<li>
<a href="index.html">Déconnexion</a>
<ul>


</ul>
</li>
</ul>
</div>



##########################################
CSS
##########################################

/*menu*/

#menu
{
margin-top:-4%;
width:100%;
height:60px;
background:#d17a82;
COLOR:#ffffff;
}

#menu ul

{
margin-left:175px;
padding:0;
line-height:60px;


}

#menu li

{
list-style:none;
float:left;
position:relative;
background-color:#3f0508;


}

#menu ul li a

{
color:#000;
text-decoration:none;
width:150px;
height:60px;
display:block;
text-align:center;
border-right:1px solid #ffffff;
COLOR:#ffffff;

}

.bordureG{
border-left:1px solid #ffffff;

}

#menu ul ul

{
position:absolute;
top:60px;
left:-175PX;
visibility:hidden;

}

#menu ul li{
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;

}


#menu ul li:hover ul

{

visibility:visible;

}

#menu li:hover

{
background-color:#8f4349;
}

#menu ul li ul a:hover

{
color:#fff;
background-color:#8f4349;
}


Bon courage
0
mimou2601 Messages postés 82 Date d'inscription dimanche 12 avril 2009 Statut Membre Dernière intervention 16 mai 2017 7
6 juil. 2013 à 05:00
merci beaucoup :)
0