css3 и выпадающее меню

Подскажите как в раздел услуги добавить выпадающее меню с таким же стилем как само меню, вот коды:

Разметка:

Код (Text):

1. div class="lavalamp" >
2. <ul>
3. <li class="active"><a href="">Home</a></li>
4. <li><a href="">Сайт</a></li>
5. <li><a href="">Услуги</a></li>
6. <li><a href="">Сайт</a></li>
7. <li><a href="">Сайт</a></li>
8. <li><a href="">Сайт</a></li>
9. <li><a href="">Сайт</a></li>
10. <li><a href="">Сайт</a></li>
11. </ul>
12. <div class="floatr"></div>
13. </div>

CSS

Код (Text):

1. .lavalamp {
2. position: relative;
3. border: 1px solid #d6d6d6;
4. background: #fff;
5. padding: 15px;
6. -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
7. -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
8. border-radius : 10px;
9. -moz-border-radius : 10px;
10. -webkit-border-radius : 10px;
11. background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
12. background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
13. height: 18px;
14. }
15. ul {
16. margin: 0;
17. padding: 0;
18. z-index: 300;
19. position: absolute;
20. }
21.  
22. ul li {
23. list-style: none;
24. float:left;
25. text-align: center;
26. }
27.  
28. ul li a {
29. padding: 0 20px;
30. text-align: center;
31. }
32.  
33. .floatr {
34. position: absolute;
35. top: 10px;
36. z-index: 50;
37. width: 70px;
38. height: 30px;
39. border-radius : 8px;
40. -moz-border-radius : 8px;
41. -webkit-border-radius : 8px;
42. background : rgba(0,0,0,.20);
43. -webkit-transition: all .4s ease-in-out;
44. -moz-transition: all .4s ease-in-out;
45. }

Javascript

Код (Text):

1.  
2. $(document).ready(function () {
3. //найти текущую позицию активного элемента
4. var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
5. var dwidth = $('.lavalamp li.active').width() + "px";
6. //присвоить эту позицию элеметку с подсветкой
7. $('.floatr').css({
8. "left": dleft+"px",
9. "width": dwidth
10. });
11. $('.lavalamp li').hover(function(){
12. var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
13. var width = $(this).width() + "px";
14. var sictranslate = "translate("+left+"px, 0px)";
15. $(this).parent('ul').next('div.floatr').css({
16. "width": width,
17. "-webkit-transform": sictranslate,
18. "-moz-transform": sictranslate
19. });
20. },
21. function(){
22. var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
23. var width = $(this).siblings('li.active').width() + "px";
24. var sictranslate = "translate("+left+"px, 0px)";
25. $(this).parent('ul').next('div.floatr').css({
26. "width": width,
27. "-webkit-transform": sictranslate,
28. "-moz-transform": sictranslate
29. });
30. }).click(function(){
31. $(this).siblings('li').removeClass('active');
32. $(this).addClass('active');
33. return false;
34. });
35. });

 

html:

Код (Text):

1.  
2. <div class="lavalamp" >
3.    <ul>
4.     <li class="active"><a href="">Home</a></li>
5.     <li><a href="">Сайт</a></li>
6.     <li><a href="">Услуги</a></li>
7.     <li><a href="">Сайт</a></li>
8.     <li><a href="">Сайт</a></li>
9.     <li><a href="">Сайт</a></li>
10.     <li><a href="">Сайт</a></li>
11.     <li><a href="">Сайт</a></li>
12.    </ul>
13.  <div class="floatr"></div>
14. </div>

css:

Код (Text):

1.  
2. .lavalamp {
3. position: relative;
4. border: 1px solid #d6d6d6;
5. background: #fff;
6. padding: 15px;
7. -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
8. -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
9. border-radius : 10px;
10. -moz-border-radius : 10px;
11. -webkit-border-radius : 10px;
12. background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
13. background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
14. height: 18px;
15. }
16.  
17.  
18. ul {
19. margin: 0;
20. padding: 0;
21. z-index: 300;
22. position: absolute;
23. }
24.  
25. ul li {
26. list-style: none;
27. float:left;
28. text-align: center;
29. }
30.  
31.  
32. ul li a {
33. padding: 0 20px;
34. text-align: center;
35. }
36.  
37.  
38. .floatr {
39. position: absolute;
40. top: 10px;
41. z-index: 50;
42. width: 70px;
43. height: 30px;
44. border-radius : 8px;
45. -moz-border-radius : 8px;
46. -webkit-border-radius : 8px;
47. background : rgba(0,0,0,.20);
48. -webkit-transition: all .4s ease-in-out;
49. -moz-transition: all .4s ease-in-out;
50. }

JavaSkript:

Код (Text):

1.  
2. $(document).ready(function () {
3. //найти текущую позицию активного элемента
4. var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
5. var dwidth = $('.lavalamp li.active').width() + "px";
6. //присвоить эту позицию элеметку с подсветкой
7. $('.floatr').css({
8. "left": dleft+"px",
9. "width": dwidth
10. });
11. $('.lavalamp li').hover(function(){
12. var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
13. var width = $(this).width() + "px";
14. var sictranslate = "translate("+left+"px, 0px)";
15. $(this).parent('ul').next('div.floatr').css({
16. "width": width,
17. "-webkit-transform": sictranslate,
18. "-moz-transform": sictranslate
19. });
20. },
21. function(){
22. var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
23. var width = $(this).siblings('li.active').width() + "px";
24. var sictranslate = "translate("+left+"px, 0px)";
25. $(this).parent('ul').next('div.floatr').css({
26. "width": width,
27. "-webkit-transform": sictranslate,
28. "-moz-transform": sictranslate
29. });
30. }).click(function(){
31. $(this).siblings('li').removeClass('active');
32. $(this).addClass('active');
33. return false;
34. });
35. });

Вот здесь

Код (Text):

1. <li><a href="">Услуги</a></li>

должно выводиться выпадающее меню с таким же стилем. Как это сделать?