bonjour à tous.

J'ai téléchargé un plugin de menu déroulant, que j'ai modifié.

Dans le bouton APPLICATIONS, j'ai un sous menu qui s'affiche GRATUIT, puis différentes catégories.
Ce que j'aimerais, c'est qu'en passant la souris sur APPLICATION, il n'y ai que le sous menu GRATUIT qui s'affiche. Puis, qu'en passant la souris sur GRATUIT, que mes catégories s'affichent par la suite.

Est ce vous pouvez m'aider s'il vous plais, c'est un peu complèxe pour moi.
Je vous transmet le css et html

Je vous remercie d'avance pour votre aide;


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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
 
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
			body{
                background:#f0f0f0;
                font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
				overflow-x:hidden;
 
            }
            h1{
                font-size:180px;
                line-height:180px;
                text-transform: uppercase;
                color:#f9f9f9;
                position:absolute;
                text-shadow:0 1px 1px #ddd;
                top:-25px;
                left:-20px;
                white-space: nowrap;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#DF7B61;
                text-decoration:none;
                text-transform: uppercase;
                text-shadow:0 1px 0 #fff;
            }
            span.reference a:hover{
                color:#000;
            }
            .box{
                margin-top:129px;
                height:460px;
				width:100%;
                position:relative;
				-moz-box-shadow:0px 0px 10px #aaa;
				-webkit-box-shadow:0px 0px 10px #aaa;
				-box-shadow:0px 0px 10px #aaa;
            }
            .box h2{
				color:#f0f0f0;
				padding:40px 10px;
				text-shadow:1px 1px 1px #ccc;
            }
 
        </style>
    </head>
    <body>
 
		<div>
 
			<ul id="ldd_menu" class="ldd_menu">
				<li>
					<span>Vacations</span><!-- Increases to 510px in width-->
 
				</li>
				<li>
					<span>APPLICATIONS</span>
					<div class="ldd_submenu">
 
						<ul>
							<li class="ldd_heading">
 
					<span>GRATUITES</span>
					<div class="ldd_submenu">
 
 
						<ul>
							<li class="ldd_heading">By Theme</li>
							<li><a href="#">Paradise Islands</a></li>
							<li><a href="#">Cruises &amp; Boat Trips</a></li>
							<li><a href="#">Wild Animals &amp; Safaris</a></li>
							<li><a href="#">Nature Pure</a></li>
							<li><a href="#">Helping others &amp; For Hope</a></li>
							<li><a href="#">Diving</a></li>
						</ul>
 
                        	</div>
 
                            </li>
 
 
						</ul>
 
 
					</div>
				</li>
				<li>
 
 
 
 
 
 
 
 
 
 
					<span>SITES WEB</span>
				</li>
			</ul>
		</div>
 
        <div>
 
 
        </div>
		<!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				/**
				 * the menu
				 */
				var $menu = $('#ldd_menu');
 
				/**
				 * for each list element,
				 * we show the submenu when hovering and
				 * expand the span element (title) to 510px
				 */
				$menu.children('li').each(function(){
					var $this = $(this);
					var $span = $this.children('span');
					$span.data('width',$span.width());
 
					$this.bind('mouseenter',function(){
						$menu.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':'510px'},300,function(){
							$this.find('.ldd_submenu').slideDown(300);
						});
					}).bind('mouseleave',function(){
						$this.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':$span.data('width')+'px'},300);
					});
				});
            });
        </script>	
    </body>
</html>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
ul.ldd_menu{
	margin:0px;
	padding:0;
	display:block;
	height:50px;
	background-color:#D04528;
	list-style:none;
	font-family:"Trebuchet MS", sans-serif;
	border-top:1px solid #EF593B;
	border-bottom:1px solid #EF593B;
	border-left:10px solid #D04528;
	-moz-box-shadow:0px 3px 4px #591E12;
	-webkit-box-shadow:0px 3px 4px #591E12;
	-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
	text-decoration:none;
}
ul.ldd_menu > li{
	float:left;
	position:relative;
}
ul.ldd_menu > li > span{
	float:left;
	color:#fff;
	background-color:#D04528;
	height:50px;
	line-height:50px;
	cursor:default;
	padding:0px 20px;
	text-shadow:0px 0px 1px #fff;
	border-right:1px solid #DF7B61;
	border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
	position:absolute;
	top:50px;
	width:550px;
	display:none;
	opacity:0.95;
	left:0px;
	font-size:10px;
	background: #C34328;
	border-top:1px solid #EF593B;
	-moz-box-shadow:0px 3px 4px #591E12 inset;
	-webkit-box-shadow:0px 3px 4px #591E12 inset;
	-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
	background-color:#f0f0f0;
	color:#444;
	display:block;
	clear:both;
	padding:15px 20px;
	text-transform:uppercase;
	font-family: Arial, serif;
	font-size:12px;
	text-shadow:0px 0px 1px #fff;
	-moz-box-shadow:0px 0px 2px #777 inset;
	-webkit-box-shadow:0px 0px 2px #777 inset;
	-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
	list-style:none;
	float:left;
	border-left:1px solid #DF7B61;
	margin:20px 0px 10px 30px;
	padding:10px;
}
li.ldd_heading{
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color:#FFB39F;
	text-shadow:0px 0px 1px #B03E23;
	padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
	font-family: Arial, serif;
	font-size:10px;
	line-height:20px;
	color:#fff;
	padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
	-moz-box-shadow:0px 0px 2px #333;
	-webkit-box-shadow:0px 0px 2px #333;
	box-shadow:0px 0px 2px #333;
	background:#AF412B;
}