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

oceane751 · 25/10/2011, 14h40

non mais ça , c'est pas possible!

Code :

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

#menu lu, #menu lu lu

Code :

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

lu

n'existe pas sauf pour pépito!

23/10/2011, 21h38	#3
encours Inscription : juillet 2011 Messages : 126 Détails du profil Informations personnelles : Sexe : Localisation : Maroc Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : juillet 2011 Messages : 126 Points : -11 Points : -11	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
	00

25/10/2011, 14h40	#4
oceane751 Membre éprouvé Intégrateur Web Inscription : novembre 2004 Messages : 992 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Intégrateur Web Informations forums : Inscription : novembre 2004 Messages : 992 Points : 434 Points : 434	non mais ça , c'est pas possible! Code : Sélectionner tout - Visualiser dans une fenêtre à part #menu lu, #menu lu lu Code : Sélectionner tout - Visualiser dans une fenêtre à part lu n'existe pas sauf pour pépito!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email