Problème css dans menu avec un UL qui se décolle vers la droite

Bonjour,

j'ai un petit souci que je ne trouve pas. Les li du sousmenu des Ul de niveau 3
se décolle un peu vers la droite d'environ 5 à 10px lorsqu'on mon menu déroule
les Ul de niveau 3.........

Je n'arrive pas à le régler dans mon CSS, pouvez-vous m'aider s'il vous plait ?
(sinon, tout le reste marche impeccable)

Merci par avance

div#menu2{width:67%; margin: auto; margin-bottom: 0px; background: #797878; height: 29px;}
div#menu2 a {color:#FFFFFF;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu2 ul {padding: 0; margin:0; /*background: white*/; text-align:center;}
div#menu2 li {background:#797878}
div#menu2 li:hover {background: #CCCCCC}
div#menu2 li.sousmenu:hover {background: #CCCCCC;}

div#menu2 li.sousmenu {/*background: url(fleche.gif) 95% 50% no-repeat;*/ background-color:#797878;}

div#menu2 li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}


div#menu2 ul li {position:relative; list-style: none; float:left; border-top:1px solid black}

div#menu2 ul ul {position: absolute; display:none; width:60px;}
div#menu2 li a {text-decoration: none; padding: 6px 0 6px; display:block; width:60px;}
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu2 ul.niveau3 {top:-1px; left: 60px;}


div#menu2 ul.niveau3 li { background: #797878;}
div#menu2 ul.niveau3 li:hover { background: #99CC00} 

        
div#menu2 ul.niveau2 ul {left: 8em;}  
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu2 ul.niveau2 li a {width: 8em;}


div#menu2 ul.niveau3 ul {left: 24em;}   
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 8em; display:block;}
div#menu2 ul.niveau3 li a {width: 24em;}
      

div#menu2 ul.niveau4 ul {left: 24em;}   
div#menu2 ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu2 ul.niveau4 li a {width: 14em;}

div#menu2 ul.niveau2 a {width: inherit;}

div#menu2 ul.niveau1 a {width: inherit; margin-right: 0.98em;} 

Modifié par nonogemeaux (20 Apr 2011 - 00:32)

Bonsoir,

sans le code html qui va avec nous ne pouvons pas vraiment deviner pourquoi cela agit de cette façon.

Avoir une page en ligne ou au moins ton code html serait vraiment utile.

<div id="menu">
<div class="adaptermenu">
<?php
include("menu.php");
?>
</div>
</div>

<div id="menu2">
<div class="adaptermenu2">
<?php
include("menu2.php");
?>
</div>
</div>

le code xhtml suivant est celui du menu qui est appelé par l'include ci-dessus

<ul class="niveau1">
<li class="sousmenu"><a>Piano année 1</a>

	    <ul class="niveau2">
	           <li  class="sousmenu"><a href="......................">Piano année 1 étape 1</a>
                    <ul class="niveau3">
			        <li class="sousmenu"><a href="musiques-traditionnelles-anglophones.php">Musiques traditionnelles anglophones</a></li>             
                    <li class="sousmenu"><a href="chansons-enfantines-anglophones.php">Chansons enfantines anglophones</a></li> 			   
                    <li class="sousmenu"><a href="chansons-enfantines-francaises.php">Chansons enfantines françaises</a></li>
                    <li class="sousmenu"><a href="musiques-de-noel.php">Musiques de nöel</a></li>		   
                    <li class="sousmenu"><a href="autrepiecepiano.php">Autres jolies pièces pour piano</a></li>
			   <!--<ul class="niveau4">
			   <li class="sousmenu"><a href="..............">Js-Bach</a></li>
			   </ul></li>-->					
					</ul>
			   </li>

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

Modifié par nonogemeaux (20 Apr 2011 - 00:32)

Je vous met un complément une autre partie CSS qui permet de disposer
le même menu en vertical sur le côté gauche. Cette partie CSS est bonne.
Je la mets, car les Ul de niveau 2 sur ce CSS ont les bons réglages qui
permettent d'avoir des Ul qui se déroule sur le côté et qui sont bien calées.
Je n'ai pas trouvé, la partie du code ici dans le niveau, qui me permettrait
de les caler correctement de la même manière dans le niveau 3 de la
précédente version CSS. Merci de votre aide

/* CSS SI ON MET LE MENU A GAUCHE

div#menu2 a{color: #000000; font-weight: bold; font-size: 16px;} 
div#menu2 li {position: relative; list-style:none; margin:0; border-bottom: 3px solid #CCC;} 
div#menu2 li.sousmenu {background:url("images/ettttoile.gif") 95% 50% no-repeat;} 
div#menu2 li:hover {background: #EDD;} 
div#menu2 li.sousmenu:hover {background-color: #EDD;} 
div#menu2 ul a {width: inherit;} 
div#menu2 ul ul {position: absolute; top: -1px;} 


div#menu2 {float: left; width: 8em;}
div#menu2 ul {margin: 0; padding: 0; width: 8em; background: #E2D695; border: 2px solid white;}
div#menu2 li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 8em; border-left: 0.3em solid #888387;}


div#menu2 ul ul {left: 8em; display:none}           
div#menu2 ul.niveau2 ul {left: 10em;}  
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {width:10em; display:block}
div#menu2 ul.niveau2 li a {width: 10em;}

  
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 8em; display:block;}      

               
div#menu2 ul.niveau2bis ul {left: 8em;}  
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2bis {display:block; width: 8em;}      
div#menu2 ul.niveau2bis li a {width: 8em;}


div#menu2 li a:hover {border-left-color: red;} 
div#menu2 ul ul li a:hover {border-left-color: #DC7BDD;} 
div#menu2 ul ul ul li a:hover {border-left-color: #0000FF;}

Modifié par nonogemeaux (20 Apr 2011 - 00:31)

Bonjour

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Rebonjour,

j'espère que la correction de mon message convient désormais

j'ai regardé encore le css, je trouve pas vraiment, je suppose que le réglage
se situe dans cette partie:

div#menu2 ul {padding: 0; margin:0; /*background: white*/; text-align:center;}

je remarque que lorsque je mets la background, j'ai des bordures blanches sur les côtés,
et je suppose que ce sont ces bordures blanches qui provoque un décalage entre les
ul de niveau 2 et de niveau 3

Cela pourrait sans doute se résoudre si on élimine ces bordures, les ul serait dans
ce cas bien côte à côte, je suppose

merci de votre avis

Je voudrais bien vous montrer à quoi ça ressemble visuellement ce décalage, si vous
avez besoin

mais je ne sais comment on vous envoie un jpg ?

J'oubliais de préciser que ce dernier petit détail à régler fait référence au conseil de Laurie-Anne de mettre mon menu à l'horizontale au lieu de gauche. Tout marche bien à l'horizontale, sauf ce dernier petit détail