Menu horizontal et vertical seulement CSS
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:
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:
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 */ |
