Discussion :

[Marc31]

Bonjour à tous,

J'ai trouvé un script sur internet et j'aimerais l'adapté pour ma situation.
J'ai mis la première img1 qui représente le resultat du code actuel et j'ai ajouté img2, c'est le résultat que j'aimerais obtenir.
Je n'arrive pas à modifier le css pour obtenir ce résultat, si quelqu'un pouvait m'aider,merci?

Ceci est la partie 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background:#ddd ;width: 10px;margin: 100px auto;color:;}
a {color:;}
#nav {margin: 0;padding: 7px 6px 0;
	background: #ddd url(../images/gradient.png)repeat-x 0 -100px;line-height: 20%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: ;text-decoration: none;display: block;padding:  8px 25px;margin: 0;
	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);}
#nav a:hover {background: #000;color: #fff;}
/* main level link hover */
#nav .current a, 
#nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);}
/* 
sub levels link hover */
#nav ul li:hover a, 
#nav li:hover li a {background: none;border: none;color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;}
#nav ul a:hover {
background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0,0,0, .1);}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: 
	absolute;top: 35px;left: 0;
	background: #ddd url(../images/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#nav ul li {float: none;margin: 0;padding: 0;}
#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}
/*
level 3+ list */
#nav ul ul {left: 181px;top: -3px;}
/*
rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
/* clearfix 
*/
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] 
#nav {display: block;}
* html #nav {height: 1%;}

[NoSmoking]

Bonjour,
je dois admettre que j'ai du mal à comprendre, au travers de ta 2^éme image à quoi tu veux aboutir

[Marc31]

En fait j'aimerais faire un menu sur une page au lieu d'un menu horizontal.

[NoSmoking]

Qu'est ce qui t'empêche de le mettre en oeuvre sur base de liste UL LI.

Attention toutefois à l’accessibilité, il est important de ne pas dérouter la bonne âme qui vient te visiter.