probléme affichage de sous menu

05 mars 2012, 11:40

bonjour,
je suis entrain de creet un menu horizontal avec html et css.
et j'ai un gros sousi, qui le suivant.
quand je survol la case du menu qui contien des sous menu, la colour du fond d'ecran du sous menue prend toute la longueur de la page, alors que je veux qui tienne juste sur la taille de la phrase de sous menu.
voici mon code html

<div id="navigation">
		<ul>
			<li class="gauche"style="font-weight:bold"><a href="javascript: ContenuOnglet(1);">Accueil</a></li>
			<li class="gauche"style="font-weight:bold"><a href="javascript: ContenuOnglet(2);">ADEP et le comité</a>
			<ul>
      <li><a href="#">Le Comite ADEP Picardie</a></li>
      <li><a href="#">Mot de la Présidente </a></li>
      <li><a href="#">Les membres du bureau</a></li>
	  <li><a href="#">ADEP Paris</a></li>
	        </ul></li>
		    <li class="gauche"style="font-weight:bold"><a href="utiliser.html">Evenements</a></li>
			<li class="gauche"style="font-weight:bold"><a href="licence.html">Maladie</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Handicaps</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Qualité de vie</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Rompre L'isolement</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Ateliers Créations</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Ecoles d'Infirmieres</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Nouveau</a></li>
			<li class="gauche"style="font-weight:bold"><a href="index.php?page=livreor">Contact</a></li>
		</ul>
	</div><!-- #navigation -->

et voici le code css associé:

Code : Tout sélectionner

#navigation {
	background: #FCFAE1;
}
#navigation a {
	color: #080004;
}
#navigation a:hover, #navigation a:focus {
	background: #77ABD6;
}
/* --- POSITIONNEMENT --- */
/* Menu de navigation */
#navigation {
	padding: 12px 15px;
	border-radius:5px;
	
}
#navigation ul {
	width: 100%; /* -> 2 */
	overflow: hidden; /* -> 2 */
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation li.gauche {
	float: left; /* -> 3 */
	margin-right: 2px;
	font-size: 1.4em;
	font-style: italic;
	}

#navigation a {
	padding: 1px;
	line-height: 1;
	font-size: 0.7em;
	text-decoration: none;
}
#navigation li:before {
 content: "|";
 margin-left: 3px;
 margin-right: 3px;
 color: black;		
}
#navigation ul li ul {
 display:block;
 background: #FCFAE1;
  position: absolute; 
  eft: 100px; 
 }
#navigation li:hover ul li {
 float:none;
 }
#navigation ul li ul {
 display:none;
 }
#navigation ul li:hover ul {
 display:block;
 }
#navigation li:hover ul li {
 float:none;
 color:#FFD700;
 } 
#navigation li ul {
 position:absolute;
 } 
#navigation li:first-child:before { content: ""; }

quelqu'un peut m'aider s'il vous plait?
merci d'avance

08 mars 2012, 19:41

oui je comprend.
Cela viens surement de la taille du sous menu qu'il suffit de réduire sa largeur..

Ton menu c'est : <ul>

mais ton sous menu c'est aussi <ul>

et tu ne lui as pas mis de class, donc il prend les propriété de <ul> à savoir une largeur de 100% :
#navigation ul {
width: 100%; /* -> 2 */
overflow: hidden; /* -> 2 */
margin: 0;
padding: 0;
list-style: none;
}

Il faut donc que rajoute une un type de ul avec une classe pour différencier le sous-menu du menu
tu rajoute ça à ton CSS :
#navigation ul.sousmenu {
width: 200px;
overflow: hidden; /* -> 2 */
margin: 0;
padding: 0;
list-style: none;
}

et tu change ça de ton html : ( <ul class="sousmenu"> à la place de <ul>

<ul class="sousmenu">
      <li><a href="#">Le Comite ADEP Picardie</a></li>
      <li><a href="#">Mot de la Présidente </a></li>
      <li><a href="#">Les membres du bureau</a></li>
          <li><a href="#">ADEP Paris</a></li>
                </ul>

j'ai testé chez moi, ça marche.

probléme affichage de sous menu

Qui est en ligne