menu deroulant

Version imprimable

menu deroulant

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

code xhtml :

Code:

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:

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 .

bonsoir,

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

Code:

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).

23/12/2005, 23h37
Bibouda

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...
24/12/2005, 00h04
jeff_!

tu est aller voir ce tuto
http://web.developpez.com/tutoriel/x...uderoulantcss/
24/12/2005, 01h21
Bibouda

oui j'ai copié sur celui là ...
24/12/2005, 01h52
jérôme

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.
24/12/2005, 17h55
Bibouda

"- 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;
}
24/12/2005, 21h34
Bibouda

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 :)
27/12/2005, 16h54
Bibouda

personne n'a d'idée?
27/12/2005, 22h08
irenee

il faudrait que tu joue sur les marges ...
Par exemple , #menu a une largeur de 120px donc tu donne a #menu .sousmenu une margin-left de 120px
27/12/2005, 22h31
Bibouda

j'ai essayé çà n'a donné aucun résultat...