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%;}