Remettre en ordre mon menu déroulant

Résolu/Fermé
gaya_102 - 29 août 2009 à 09:37
 gaya_102 - 29 août 2009 à 10:39
Bonjour,
http://www.lemondedegaya.fr/mariage2.php

mon menu a des soucis.
Je voudrais que mes images se suivent et que mes rollover fonctionnent mais je n'y arrivent pas


css de mon menu déroulant
/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;
	font-family: times, Helvetica, sans-serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 25px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
	color: green;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: black;/* couleur du fond du sous menu en on*/
	color: pink; /* couleur de la police sous menu en on*/
} 
 
#menuHorizon li ul {
	position: absolute;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */

}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170px;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;

	font-family:Comic Sans MS, Times New Roman, Times, serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 22px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
font-size: 17px;
	color: #b04cbf;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
	color: purple; /* couleur de la police sous menu en on*/
	font-size: 17px;
} 
 
#menuHorizon li ul {
	position: absolute;
	top: 28px;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */
font-size: 15px;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}


le page de mon menu

<div id="second">
   
    <ul id="menuHorizon">
          <li class="deroulant" style="width:156px"><a href="accueil.php"><img src="images/accueil_off.jpg" alt="images/accueil_on.jpg" class="rollOver" /></a>            
           
            </li>
 
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
            <li class="deroulant" style="width:78px"><a href="mariage.php"><img src="images/mariage_off.jpg" alt="images/mariage_on.jpg" class="rollOver" /></a>
              <ul>
            	 <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>

</ul>
</li>

<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
     
            <li class="deroulant" style="width:160px"><a href="naissance.php"><img src="images/naissance_off.jpg" alt="images/naissance_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>
        	  
               </ul>
            </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
			  
			<li class="deroulant" style="width:160px"><a href="divers.php"><img src="images/divers_off.jpg" alt="images/divers_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="commentvenir.php">Comment venir</a></li>
              	  <li><a href="hebergement.php">Hébergement</a></li>
        	  
               </ul>
            </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
          <li class="deroulant" style="width:89px"><a href="contact.php"><img src="images/contact_off.jpg" alt="images/contact_on.jpg" class="rollOver" /></a>
            
          </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
    </div>


merci d'avance de votre aide
A voir également:

1 réponse

résolu en partie
0