Dropdown accordian menu

Dropdown accordian menu

Hi guys, I have an interesting problem. I've got a client who wants a different type of menu and although I've searched everwhere, I still haven't found a solution.

So basically I need a 3 part menu. 
1. Main menu is a dropdown that is activated when clicked and the sub-menu appears. 

2. Sub-menu

3. Some of the sub-menu links need to be an accordian if they have sub-sub-menu links. 

Here is the code I have so far, although I've only managed to get the dropdown working, but it's not working properly with all the top menu links:

I've also added all my styles etc. so far.
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style type="text/css" >
  8. .topnav, .topnav li {
  9.     margin:0;
  10.     padding:0;
  11.     list-style:none;
  12. }
  13. .topnav li  {
  14. float: left;
  15. }
  16. .main_menu_btn {
  17. background: url(images/main_menu_gradient.gif) repeat-x;
  18. height: 53px;
  19. display:block;
  20. padding: 16px 20px;
  21. color: #FFF;
  22. text-decoration:none;
  23. position: relative;
  24. }
  25. .main_sub_nav {
  26.     display:none;
  27.     width:300px;
  28.     border: 1px solid #1c1c1c;
  29. position:absolute;
  30. top: 60px;
  31. padding-left: 0;
  32. }
  33. .main_sub_nav li {
  34.     background-color: #302f2f;
  35. float:none;
  36. list-style: none;
  37. }
  38.  
  39. .main_sub_nav li a {
  40.     color:#FFFFFF;
  41.     text-decoration:none;
  42.     padding:10px;
  43.     display:block;
  44. }
  45.  
  46. .main_sub_nav li a:hover {
  47.     padding:10px;
  48.     font-weight:bold;
  49.     color: #F00880;
  50. }
  51. </style>
  52. </head>

  54. <body>

  56. <ul class="topnav">
  57.                     <li><img src="images/main_menu_flip.jpg" width="27" height="53" /></li>
  58.                         <li>
  59.                         <a href="#" class="main_menu_btn">quem somos</a>
  60.                             <ul class="main_sub_nav">
  61.                                 <li><a href="#">A Website #1</a>
  62.                                 <ul>
  63.                                     <li>Link 1</li>
  64.                                         <li>Link 2</li>
  65.                                     </ul>
  66.                                 </li>
  67.                                 <li><a href="#">A Website #2</a></li>
  68.                                 <li><a href="#">A Link #1</a></li>
  69.                                 <li><a href="#">A Link #2</a></li>
  70.                                 <li><a href="#">A Website #3</a></li>
  71.                                 <li><a href="#">A Website #4</a></li>
  72.                                 <li><a href="#">A Link #3</a></li>
  73.                                 <li><a href="#">A Link #4</a></li>
  74.                             </ul>
  75.                         </li>
  76.                         <li><a href="#" class="main_menu_btn">como funciona</a>
  77.                         <ul class="main_sub_nav">
  78.                                 <li><a href="#">A Website #1</a></li>
  79.                                 <li><a href="#">A Website #2</a></li>
  80.                                 <li><a href="#">A Link #1</a></li>
  81.                                 <li><a href="#">A Link #2</a></li>
  82.                                 <li><a href="#">A Website #3</a></li>
  83.                                 <li><a href="#">A Website #4</a></li>
  84.                             </ul>
  85.                         </li>
  86.                         <li><a href="#" class="main_menu_btn">pre&ccedil;o</a></li>
  87.                         <li><a href="#" class="main_menu_btn">parceiros</a></li>
  88.                         <li><a href="#" class="main_menu_btn">clube</a></li>
  89.                         <li><img src="images/main_menu_finish.jpg" width="9" height="53" /></li>
  90.                     </ul>
  91.                     
  92. <script type="text/javascript" src="js/jquery.js"></script>
  93. <script type="text/javascript" >
  94. $(document).ready(function () {
  95. $('a.main_menu_btn').click(function () {
  96. $('ul.main_sub_nav').slideToggle('medium');
  97.  
  98.         }
  99.     );
  100.      
  101. });
  102. </script>

  104. </body>
  105. </html>