menu deroulant

**Bibouda** · 23/12/2005, 21h39

Bonsoir , quelqu'un pourrait me dire pq mon menu n'est pas déroulant :

code xhtml :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="menu">
     <ul>
         <li><a href="blop.php"><b>You</b></a>
  <ul class="sousmenu">
   <li><a href="#">ab</a></li>
   <li><a href="#">abcd</a></li>
   <li><a href="#">efgh</a></li>
   <li><a href="#">ijkl</a></li>
  </ul>
         </li>
  </ul>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
#menu {
background: #95BCC5; 
font-family: Arial, Helvetica, sans-serif;
height: 500px;
border: 1px solid black;
border-top-color: #fff;
width: 120px;
position: absolute;
}
 
#menu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
} 
 
#menu li {
   margin: 0;
   padding: 0;
   border-bottom: 0.1em dotted #fff;   
} 
 
#menu a {
   margin: 0;
   padding: 0.4em;
   display: block;
   text-decoration: none;
   color: #fff;
} 
 
#menu a:hover {
   background: #124288;
}
 
#menu .sousmenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menu .sousmenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}

merci de votre aide .

**Auteur** · 23/12/2005, 23h29

bonsoir,

il manque le script qui gère l'affichage de ton menu :
voici un exemple de menu déroulant

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<head>
<title></title>
<style type="text/css">
<!--
li{
cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function GestionMenu(objet){
 var objetFils = "Sous"+objet.id;
 var elmt =  document.getElementById(objetFils);
 
 if (elmt.style.display=="none")
    elmt.style.display = "block";
 else
    elmt.style.display = "none";
 
}
 
//-->
</script>
 
</head>
 
<body>
<ul>
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
    <ul id="SousMenu1" style="display: none">
    <li>Sous menu11</li>
    <li>Sous menu12</li>
    <li>Sous menu13</li>
    </ul>
<li id="Menu2" onclick="GestionMenu(this)">Menu 2</li>
    <ul id="SousMenu2"  style="display: none">
    <li>Sous menu21</li>
    <li>Sous menu22</li>
    <li>Sous menu23</li>
    </ul>
</ul>
 
</body>
 
</html>

pour les Sous Menus, j'ai inclus le style "display:none" dans la balise ul et non pas dans le CSS (le display n'est pas pris en compte sinon).

**Bibouda** · 23/12/2005, 23h37

ben non je regrette , moi je ne veux pas de javascript pour mon menu déroulant , je veux un menu deroulant 100% css , et pour ceci je me suis inspiré du cours sur ce site , et apparemment çà ne marche pas chez moi...

**jeff_!** · 24/12/2005, 00h04

tu est aller voir ce tuto
http://web.developpez.com/tutoriel/x...uderoulantcss/

**Bibouda** · 24/12/2005, 01h21

oui j'ai copié sur celui là ...

**jérôme** · 24/12/2005, 01h52

Il te manque 2 choses :
- display: none; dans #menu .sousmenu pour cacher le sous-menu par défaut.
- et surtout la règle qui va permettre de montrer le sousmenu : #menu li:hover > .sousmenu { display: block; }
Mais là tu zappes tous les utilisateurs de IE qui ne comprend pas cette règle.

Donc utilise le javascript.

**Bibouda** · 24/12/2005, 17h55

"- et surtout la règle qui va permettre de montrer le sousmenu : #menu li:hover > .sousmenu { display: block; } "

tu veux dire que c'est çà que je dois changer :

#menu .sousmenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
}

et mettre :

#menu .sousmenu li
{
{ display: block; }
float: none;
margin: 0;
padding: 0;
border: 0;
}

**Bibouda** · 24/12/2005, 21h34

ok c'est bon j'ai réussi , ya juste un ptit soucis , mon menu est vertical , et le sous menu se déroule dans la meme colonne que le menu , moi je souheterais que je sousmenu se déroule à coté dans une autre fenetre , comme sur ce site :

http://www.counterpane.com

à gauche , le menu se déroule dans une fenetre bleue...

merci et joyeux noel