Menu horizontal et vertical seulement CSS

**encours** · 23/10/2011, 18h44

bonjour
je veux avoir un menu verticale que lorsque je passe la souris sur un des menus il m'affiche une liste verticale directement sous le menu
et quelques eléments de cette liste lorsque je passe la souris sur eux j'aimerai avoir une autre liste verticale a coté de celle ci et commence de l'élément ou j'ai passé la souris
comme le word et ....

je me suis basé sur un code le voila

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Menu</title>
        <link type="text/css" rel="stylesheet" href="essaimenu2.css" />
    </head>
    <body>
        <ul id="menu">
            <li><a href="#"><span>I.Menu</span></a>
                <ul>
                    <li><a href="#">I.1.Sous menu</a></li>
                    <li><a href="#"><span>I.2.Sous menu</span></a>
                        <ul>
                            <li><a href="#"><span>I.2.a.Sous sous menu</span></a>
                                <ul>
                                    <li><a href="#">I.2.a.i.Sous sous sous menu</a></li>
                                    <li><a href="#">I.2.a.ii.Sous sous sous menu</a></li>
                                    <li><a href="#">I.2.a.iii.Sous sous sous menu</a></li>
                                </ul>
                            </li>
                            <li><a href="#"><span>I.2.b.Sous sous menu</span></a>
                                <ul>
                                    <li><a href="#">I.2.b.i.Sous sous sous menu</a></li>
                                    <li><a href="#">I.2.b.ii.Sous sous sous menu</a></li>
                                    <li><a href="#">I.2.b.iii.Sous sous sous menu</a></li>
                                </ul>
                            </li>
                            <li><a href="#">1.2.c.Sous sous menu</a></li>
                        </ul>
                    </li>
                    <li><a href="#">I.3.Sous menu</a></li>
                </ul>
            </li>
            <li><a href="#"><span>II.Menu</span></a>
                <ul>
                    <li><a href="#">II.1.Sous menu</a></li>
                    <li><a href="#">II.2.Sous menu</a></li>
                    <li><a href="#">II.3.Sous menu</a></li>
                </ul>
            </li>
            <li><a href="#">III.Menu</a></li>
        </ul>
        <script type="text/javascript">
            <!--
                setHover();
            -->    </body>
</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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
ul#menu li ul {display: none;}          /* On cache les sous éléments */
 
#menu
{
 width: 760px;  /* largeur de toute la liste*/
 list-style-type: none;   /* pour empecher les puces */
 margin-left: 131px; 
 position: absolute; 		/*Pour éviter un décalage du contenu lorsque le menu est déroulé*/
 padding: 0;
 border: 0;
}
#menu li
{
 float: left;		/* pour rendre liste verticale ou bien display: inline*/
 width: 96px;	/* largeur de chauque elt de la liste */
 margin:0;
 padding: 0;
 border: 0;
}
 
#menu lu, #menu lu lu
{
	display: none;		/* pour ne pas s'afficher */
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
 
ul#menu li:hover > ul {display: block;} /* On affiche les éléments survolés par la souris */

**NoSmoking** · 23/10/2011, 21h31

Bonsoir,
que sont les balises LU que tu utilises dans ta déclaration de style

Code :

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

1
2
3
4
5
6
7
8
#menu lu, #menu lu lu
{
	display: none;		/* pour ne pas s'afficher */
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}

**encours** · 23/10/2011, 21h38

d'abord j'espere que tu as compris mon probleme en bref j'aimerai avoir un menu comme celui de word ......

le menu horizantale, le 1er sous menu verticale, le 2ème sous menu verticle ....;
si vous pouvez testez le code pour voir ce que je n'ai pas su faire

je m'exuse pour la mauvaise facon de s'exprimer

merci