Sous-menu qui ne veut pas passer en dessous
Résolu
riwalenn
-
riwalenn -
riwalenn -
Bonjour,
voilà j'ai créer un menu et le 1er item a un sous-menu en lien avec la bdd. Le problème étant que le <li><ul> se met à coté de son <li> et non en dessous.
code html de ma page :
code css :
voila si quelqu'un a une meilleure vision de tout ça que moi, suis open ^^
cordialement,
Riwalenn
voilà j'ai créer un menu et le 1er item a un sous-menu en lien avec la bdd. Le problème étant que le <li><ul> se met à coté de son <li> et non en dessous.
code html de ma page :
<?php
include("connexion.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>La cuisine de cécile</title>
<link rel="stylesheet" media="screen" href="styles/styles2.css">
</head>
<body>
<ul class="recettes-men">
<li id="li-r"><a href="recettes.php">Recettes</a></li>
<ul class="ulrecettes">
<?php
$sql= "SELECT idFamilles, Famille from familles";
$rez=mysql_query($sql);
$nb_lignes = mysql_affected_rows();
while($nf=mysql_fetch_array($rez)){
echo "<li><a href=\"recettes.php?id=".$nf[0]."\">" . $nf[1] ."</a></li>";
}?>
</ul>
<li id="li-co"><a href="cours.php">Cours</a></li>
<li id="li-cal"><a href="calendrier.php">Calendrier</a></li>
<li id="li-cont"><a href="contact.php">Contact</a></li>
<li id="li-av"><a href="livredor.php">Vos avis</a></li>
</ul>
</body>
</html>
code css :
.recettes-men{list-style:none; padding-left:285px; margin-top:-15px; font-weight:bold; position:absolute z-index:2}
.recettes-men li{float:left; width:96px; height:29px; text-align:center;}
.recettes-men a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; display:block;}
.recettes-men a:hover{text-decoration:none; color:#000000;}
#li-r{background-color:#f8e6a8; color:#000000;}
#li-co{background-color:#dd9f19; color:#000000;}
#li-cal{background-color:#552908; color:#FFFFFF;}
#li-cont{background-color:#ebb575; color:#000000;}
#li-av{background-color:#d61818; color:#FFFFFF;}
#li-r a{color:#000000;}
#li-co a{color:#000000;}
#li-cal a{color:#FFFFFF;}
#li-cont a{color:#000000;}
#li-av a{color:#FFFFFF;}
#li-r a:hover{color:#000000; text-decoration: none;}
#li-co a:hover{color:#000000; text-decoration: none;}
#li-cal a:hover{color:#FFFFFF; text-decoration: none;}
#li-cont a:hover{color:#000000; text-decoration: none;}
#li-av a:hover{color:#FFFFFF; text-decoration: none;}
.recettes li{display:none; list-style:none; padding:0px; margin-top:0px; width:96px;}
.recettes li ul{width:96px; padding:0px; margin:0px; height:29px;}
.recettes-men li:hover .ulrecettes{display:block;}
.recettes li ul a{color:#000000; text-decoration:none;}
voila si quelqu'un a une meilleure vision de tout ça que moi, suis open ^^
cordialement,
Riwalenn
4 réponses
-
je fais une petite modifs de code html ^^ :
<ul class="recettes-men"> <li id="li-r"><a href="recettes.php">Recettes</a></li> <ul class="ulrecettes"> <?php $sql= "SELECT idFamilles, Famille from familles"; $rez=mysql_query($sql); $nb_lignes = mysql_affected_rows(); while($nf=mysql_fetch_array($rez)){ echo "<li><a href=\"recettes.php?id=".$nf[0]."\">" . $nf[1] ."</a></li><br \>"; }?> </ul> <li id="li-co"><a href="cours.php">Cours</a></li> <li id="li-cal"><a href="calendrier.php">Calendrier</a></li> <li id="li-cont"><a href="contact.php">Contact</a></li> <li id="li-av"><a href="livredor.php">Vos avis</a></li> </ul>
enfin malgré que j'ai mis le bon code html c'est-à-dire le </li> là où il fallait, le display:none ne fonctionne toujours pas Oo... -
l'imbrication est balises est mauvaise.
pour le sous menu il faut que ce soit du genre :<ul> <li>[...] <ul> <li></li> </ul> </li>
or là, le <li> est fermé avant la sous liste.
-
j'ai noté cette erreur sur le post juste avant le tien ^^ et ce n'est pas ça qui a arrangé le problème... j'ai repris un de mes anciens menu qui fonctionnait et je l'ai petit à petit adapté à celui que je voulais faire... du coup ça fonctionne c'est à ne rien y comprendre ^^
je mets le code au cas ou quelqu'un saurait ce qui a changé :
/*//////////////// Menu du haut ////////////////*/ #recettes-men{list-style:none; padding-left:285px; margin-top:-15px; font-weight:bold; position:absolute z-index:2} #recettes-men li{float:left; margin:0px; width:96px;} /*/////////////// Sous-menu du haut ////////////////*/ #recettes-men li ul{display:none; list-style:none; padding:0px; margin-top:0px; width:96px;} #recettes-men li ul li{width:96px; padding:0px; margin: 0px; height:29px;} #recettes-men li:hover ul{display:block;} #li-r{float:left; width:96px; height:29px; background-color:#f8e6a8; color:#000000; text-align:center;} #li-r a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration: none; font-size:14px; color:#000000; display:block;} #li-co{float:left; width:96px; height:29px; background-color:#dd9f19; color:#000000; text-align:center;} #li-co a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; color:#000000; display:block;} #li-cal{float:left; width:96px; height:29px; background-color:#552908; color:#FFFFFF; text-align:center;} #li-cal a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; color:#FFFFFF; display:block;} #li-cont{float:left; width:96px; height:29px; background-color:#ebb575; color:#000000; text-align:center;} #li-cont a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; color:#000000; display:block;} #li-av{float:left; width:96px; height:29px; background-color:#d61818; color:#FFFFFF; text-align:center;} #li-av a{margin-top:7px; font-family: Arial, "Times New Roman", Courier; text-decoration:none; font-size:14px; color:#FFFFFF; display:block;} #li-r ul li{background-color:#f8e6a8; color:#000000; text-align:center;} #li-r ul li a{background-color:#f8e6a8; color:#000000; text-align:center;} -
