sous-menu qui ne passe pas sous le menu

**Riwalenn** · 13/08/2010, 10h12

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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?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 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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

P.S: petite modif du code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

j'ai mis le </li> là ou il devait être... mais cela ne résouds pas mon problème de display:none qui ne fonctionne pas

**ornitho13** · 13/08/2010, 11h27

Salut,

quand tu ajoutes un autre <ul>, il faut le rajouter à l'intérieur du <li> tu ne peux pas le mettre après, ce n'est pas valide. De plus tu n'as pas besoin de <br /> après le <li> (pas valide non plus).

Valide ton code sur W3C et tu verras les erreurs.

Voici un exemple de ce que tu devrais avoir pour que cela fonctionne:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul> 
    <li>
       mon titre de menu
       <ul>
           <li>...</li>
           <li>...</li>
       </ul>
    </li>
    <li>...</li>
</ul>

Avec ton code, cela donnerait ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
<li id="li-r"><a href="recettes.php">Recettes</a>
<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>
...

**Riwalenn** · 13/08/2010, 11h37

en fait ça je l'avais déjà vu ^^ mais ce n'est pas ça qui résoud le problème..

la solution étant que le display:none se met sur le ul et non sur le li ^^
voilou

sous-menu qui ne passe pas sous le menu

CSS

Discussions similaires

Partager

Partager