Bonjour,

J'ai un petit souci avec mon menu deroulant CSS fortement inspiré d'un code trouvé sur le net et adapté à mes besoins

Il s'agit d'un menu déroulant vertical (déroulant vers la droite)

Il fonctionne très bien sur firefox mais le problème vient plutôt d'IE ou il est pratiquement impossible de cliquer sur les sous-menus car lors du mouvement de souris ils disparaissent, je voudrais donc avoir la possibilité de "bloquer" l'affichage de mon sous menu lorsque l'on survole pour laisser le temps à mon internaute de cliquer sur la rubrique qui l'intéresse.

Voici mon code HTML

div id="menu_gauche">
   <ul class="niveau1">
      <li><a href="index.php">Bienvenue</a></li>
      <li class="sousmenu"><a href="nos_produits.php">Nos produits</a>
         <ul class="niveau2">
			<li><a href="porte_entree.php">Porte d'entrées</a></li>
			<li><a href="volets_roulants.php">Volets roulants</a></li>
			<li><a href="rideaux_grilles_metalliques.php">Rideaux et grilles</a></li>
			<li><a href="portail_maison.php">Portails</a></li>
         </ul>
      </li>
      <li><a href="nos_realisations.php">Nos réalisations</a></li>
	    <li><a href="contactez.php">Nous contacter</a></li>
     
   </ul>
</div>

Et le code CSS qui va avec :

/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#menu_gauche {
          width: 150px;
		  float:left
         }

div#menu_gauche ul {
             padding: 0;
             width: 150px;
             border:1px solid;
             margin:0px;
			 
            }

/*On positionne les elements du menu */
div#menu_gauche ul li {
                position:relative;
                list-style: none; /*on enleve les icones de liste */
                border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
               }

div#menu_gauche ul ul {
                position: absolute;
                top: 0;
                left: 150px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
               }  

div#menu_gauche li a {
               text-decoration: none; /* plus de soulignement pour les liens */
              }

Merci de votre aide

Salut ! Perso mes menus déroulant (sur mon site) marche très bien sous IE.

Je pense que c'est un problème d'espacement entre les <li> qui déroulent. Si la souris est sur un espace vide, il n'est plus considéré comme "hover" et le menu disparait.

Regardes si la partie déroulée n'est pas espacé du reste.

Salut, je te propose de regarde ce vidéo tutoriel qui répond exactement à ce que tu cherche.

http://www.grafikart.fr/tutoriels/vide [...] oulant-css-32
la vidéo étant relativement longue bien qu'intéressante, je te propose de regarde à partir de la 12eme minute.

Si tu as des questions n'hésites pas.

Il y a pas mal d'astuce sur IE et le Css ici http://www.tagbytag.org/fr/articles/in [...] -guide?page=3

Bonjour,

Il s'agit bien effectivement de mon problème mais même en ajoutant les border j'ai toujours ma disparition du menu déroulant dès que je bouge la souris

J'ai tout essayé, je comprend pas ...

Bonjour,

Nullement dans ton code css il n'est fait référence à la moindre intéraction avec la souris (pseudo classe :hover ou autre...)
J'en déduis donc que tu passes par du javascript pour 'déplier' ton menu : si c'est le cas, il suffit d'augmenter le temps de réponse de ta fonction qui replie ce menu (tu dois avoir une ligne avec un clearTimeout(xxx); )

Acceptes de dévoiler pour que l'on puisse t'aider
David

Bonjour,

Celà passe bien par du CSS j'ai oublié une partie du code que voici :

/* On cache tous les sous menu avec la propriété display none */
div#menu_gauche ul ul {
                position: absolute;
                top: 0;
                left: 150px;
                display:none
               }

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#menu_gauche ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu_gauche ul.niveau2 li.sousmenu:hover ul.niveau3 {
                                                  display:block;
                                                 }
												 
												  /* fond blanc pour le menu */
div#menu_gauche a {
            color:#FFFFFF;
			background:transparent url(Images/fond_menu_gauche.png) repeat;	
			font-family:Georgia, "Times New Roman", Times, serif;
			font-weight:bold;
			font-size:14px;
			
           }

/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu_gauche li:hover {
                   background: #1846a3
                  }

div#menu_gauche li.sousmenu:hover {
                            background: #EBB;
                           }


/* on rajoute une bordure a gauche
div#menu_gauche li a {
               text-decoration: none;
               padding: 4px 0 4px 8px;
               display:block; border-left:
               8px solid #BBB; width:134px
              }

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu_gauche li a:hover {
                     border-left-color: #1846a3;
                    }
div#menu_gauche ul ul li a:hover {
                           border-left-color: #1846a3;
                          }
div#menu_gauche ul ul ul li a:hover {
                              border-left-color: #0000FF;
                             }

j'ai remarqué qu'en enlevant float:left à ma div menu_gauche, le menu fonctionnait parfaitement mais ma mise en page est décalée totalement :-(

Re,

Je te donnes un lien plus explicite que n'importe quel réponse
http://htmldog.com/articles/suckerfish/dropdowns/
www.pompage.net/pompe/deroulants/ (en français mais pb sur leur serveur...)

David

Merci de votre aide, j'ai bien lu l'article en htmldog et j'ai refait mon menu qui est désormais parfaitement fonctionnel sur IE, il s'agissait d'un espacement des <li> qui bloquait le tout