Discussion :

[TomTom71]

Bonjour à tous.

Je conçois un site pour le CE de mon entreprise et c'est mon tout premier site.
J'ai doit réaliser un menu déroulant.
Il fonctionne parfaitement sous firefox, mais
sous IE7 il s'affiche que partiellement. Quant à IE6,
c'est simple : les sous menus ne s'affichent pas.

Voici ma css :

#menu1 {

width:120px;

}

li.menu2
{

background-color:#FB2038;
}

li.menu3
{

background-color:#fc9300;

}

ul, li
{
display:block;
margin:0;
padding:0;
border:0px none;
}

ul
{
width:140px; /*modif largeur cadre*/
list-style:none;
}

li
{
position:relative;
padding:1px;
padding-left:10px; /*modif position texte largeur */
z-index:9;
}

li.menu1>ul
{
position:absolute;
left:120px; /* IE */
top:5px;
}

li.menu2>ul
{
position:absolute;
left:120px;
top:-25px;
}

li.menu3>ul
{
position:absolute;
left:120px;
top:-25px;
}


/* others */

li.menu1 a
{
padding:2px;
text-decoration:none;
color:white;
font-weight:bold;
/*width:100%; /* IE */
display:block;
margin:0;
border:0px none;

}

li>a
{
width:auto;
} /* others */

/* regular hovers */

a.menu1:hover
{
font-weight:bold;
color:#FC9300;
}

a.menu2:hover
{
font-weight:bold;
color:#4ecef7;

}

a.menu3:hover
{
font-weight:bold;
color:#fb2038;
}

/* hovers with specificity */

li.menu1:hover, li.menu2:hover
{
font-weight:bold;
color:#FC9300;
z-index:100;
}

li.menu2:hover
{
font-weight:bold;
color:#4ecef7;
z-index:100;
}

li.menu3:hover
{
font-weight:bold;
color:#fb2038;
z-index:100;
}

ul ul, li:hover ul ul
{
display:none;
}

li:hover ul, li:hover li:hover ul
{
display:block;
}

Sauriez vous d' où peut venir le problème?
Je vous remercie d'avance

[razorlok]

J'ai eu des soucis du même type il y a peu de temps :

J'ai trouvé les raisons du non affichage de mes menus déroulants :

Le margin-top ou le padding-top étaient trop importants et créaient un espace vide entre le bouton et le sous-menu, donc au survol de la zone vide, ça ne s'affichait pas.
Essaie donc de mettre des margin-top à 0, voir négatifs, si ça provient de là.

Il est aussi possible que ton sous-menu passe "sous" un <div>, et qu'il soit masqué, donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

z-index:1;

pour Firefox, pour IE, il faut trouver une solution pour que ca ne se chevauche pas...

[TomTom71]

Merci beaucoup pour ta réponse razorlok
Je vais essayer tes conseils ^^

[<romain/>]

Est-ce qu'il est possible d'avoir le code html stp?


Je suis plutôt d'accord avec razorlock, généralement les paddings ça merde un peu sous IE. Je crois que ça viens du faite que les valeurs n'ont pas le même 0 (il y en a un qui compte la bordure dans la marge interne et l'autre non je crois)

Personnellement j'essaie toujours d'éviter les paddings

[TomTom71]

Alors voici mon code. En fait le contenu de mon menu est chargé d'une BDD

<ul><!-- élément conteneur du menu #1 -->
<?php
$requete = "SELECT num_elus, nom_elus FROM elus";
$resultat = mysql_query($requete);
while($enreg = mysql_fetch_array($resultat))
{
$num_elus = $enreg["num_elus"];
$nom = $enreg["nom_elus"];
echo '<li class="menu2"><a href = "elus1.php?num_elus='.$num_elus.'" class="menu2">Elus '. $nom .'</a></li>';
}
?>
</ul>
</li>
<li class="menu1"><a href="commission.php" class="menu1">Commissions</a>
<ul><!-- élément conteneur du sous-menu 1.3 -->
<?php
$requete = "SELECT * FROM commission";
$resultat = mysql_query($requete);
while($enreg = mysql_fetch_array($resultat))
{
$num_comm = $enreg["num_comm"];
$nom = $enreg["nom_comm"];
$fic = $enreg["fic_comm"];

$sql = "SELECT nom_sscomm,num_sscomm FROM sscomm WHERE num_comm = $num_comm";
$result = mysql_query($sql);
$rows = mysql_num_rows($result);
if ($rows == 0)
{
if ((!is_null($fic)) || ($fic!="comm/"))
{
echo '<li class="menu2"><a href = '.$fic.' target=\"_blank\" class="menu2">'.$nom.'</a></li>';
}
else
{
echo '<li class="menu2"><a href = "#" target=\"_blank\" class="menu2">'.$nom.'</a></li>';
}
}
else
{
echo '<li class="menu2"><a href = "sscommission.php?num_comm='.$num_comm.'" class="menu2">'.$nom.'</a>';
echo '<ul>';
$req = "SELECT nom_sscomm,num_sscomm FROM sscomm WHERE num_comm = $num_comm";
$res = mysql_query($req);
$rows = mysql_num_rows($res);
while ($enreg = mysql_fetch_array($res))
{
$num_sscomm = $enreg["num_sscomm"];
$nom_sscomm = $enreg["nom_sscomm"];
echo '<li class="menu3"><a href="sscommission1.php?num_comm='.$num_comm.'&num_sscomm='.$num_sscomm.'" class="menu3">'.$nom_sscomm.' ('.$num_sscomm.')</li>';
}
echo '</ul>';
echo '</li>';
}
}
?>
</ul>
</li>
<li class="menu1"><a href="aclts.php" class="menu1">ACLTS</a>
<ul>
<?php
$requete = "SELECT * FROM type_ACLTS";
$resultat = mysql_query($requete);
while($enreg = mysql_fetch_array($resultat))
{
$num_type = $enreg["num_type"];
$nom_type = $enreg["nom_type"];
echo '<li class="menu2"><a href="aclts1.php?num_type='.$num_type.'" class="menu2">'.$nom_type.'</a></li>';
}
?>
</ul>
</li>
<li class="menu1"><a href="news.php" class="menu1">News</a></li>
<li class="menu1"><a href="down.php" class="menu1">Téléchargement</a></li>
<li class="menu1"><a href="offre.php" class="menu1">Offres CE</a></li>
<li class="menu1"><a href="pann.php" class="menu1">Petites Annonces</a></li>
<li class="menu1"><a href="contact.php" class="menu1">Contact</a></li>
</ul><!-- fin du conteneur menu -->

[razorlok]

Il y a peut-être un div de texte en dessous de ton menu, qui bloque son affichage.
Est-ce un menu vertical ou horizontal ? Où est-il situé dans le squelette de ton site ?

[TomTom71]

J'ai changer le margin-top et le padding-top comme vous me l'avez conseillé, mais toujours pas d'affichage...
De plus si je change le padding-top, le menu est mal position par rapport au site.
J'ai mis temporairement le site à l'adresse suivante :
http://tomtom716.free.fr/CE

[razorlok]

J'ai essayé ton lien, sous Mozilla, ton menu marche très bien.
Sous IE je ne peux pas te dire l'accès internet est bloqué au bureau (tant mieux ).

C'est un menu vertical, donc change les valeurs de margin-left et padding-left, négativement si il faut.

[TomTom71]

Il y a peut-être un div de texte en dessous de ton menu, qui bloque son affichage.
Est-ce un menu vertical ou horizontal ? Où est-il situé dans le squelette de ton site ?

Il y a effectivement un div de texte en dessous de mon menu. (j'ai utiliser pour ça la propriété clear:both)
Je suis obligé de passer par ça si je veux que mon menu s'affiche sans être coupé sous IE (problème que j'ai eu il y a quelque temps)
Il s'agit d'un menu vertical.

[razorlok]

J'ai oublié de préciser, vu que tu patch essentiellement pour IE, n'oublie pas de mettre un / avant tes valeurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/margin-left:-5px;