Bonjour,

Pour un site que je suis en train de créer, j'ai un menu déroulant, et sur certaines pages, j'utilise la fonction Accordeon de Jquery.

Pour le menu, je le créé avec :

	<ul id="menu-demo2">
	<li><a href="#">Actions semaine en cours</a>
		<ul>
			<li><a href="?page=liste_semaine">Liste des clients</a></li>
			<li><a href="?page=changement_affectation">Modifier les affectations</a></li>
			<li><a href="?page=doc_excel">Créer les fichiers EXCEL</a></li>
			<li><a href="?page=recap_presta">Recap des prestations</a></li>
			<li><a href="?page=recap_paiements">Listing des paiements</a></li>
			<li><a href="?page=impression_remise_chq">Ventilation des paiements</a></li>
		</ul>
	</li>
....

Dans le CSS, j'ai cela :

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

Et je créé l'accordéon avec Jquery en script, et appelle l'accordeon, par

<div id="accordion">
<h5>Ajouter / Modifier / Supprimer des informations sur les clients d'une reservation</h5>
<div>
Mon tableau
</div>
<h5>Demandes de Pique Nique à titre individuel (hors programmation stage par exemple) et restrictions alimentaires</h5>
<div>
Mon tableau
</div>
</div> //Fin de l'accordeon

Comme vous le voyez sur le fichier image joint, j'ai un souci de superposition entre le menu, et les titres des accordéons.

Avez-vous une idée pour remédier à cela ?

Merci encore de votre aide.

une solution, mettre une marge à droite à #accordion, pour laisser de l'espace pour le menu.
après, un menu horizontal plutôt que vertical serait surement une meilleure solution.

Merci,

Mais j'ai bien essayé de justifier le texte de l'accordéon à gauche, mais le bandeau en lui même reste centré, et même lorsque j'arrive à le réduire en taille '50%', il reste centré, je n'arrive pas à le placer complètement à gauche.

Si je n'ai que la solution du menu horizontal, j'y viendrai, mais j'essaye toutes les possibilités avant

Une autre idée ?

Salut,

regarde du côté de z-index en CSS

Oh punaise !! MERCI !!!

C'est exactement cela !!

Merci encore, Stéphane

Avec plaisir, bonne continuation !