ساخت منوی ریزشی برای وبسایت

سلام دوستان
من در حال آماده کردن یک منو برای وبسایتی هستم. می‌خواهم قابلیتی به شرح زیر برای منو ایجاد کنم. اگر کسی بتونه منو راهنمایی کنه خیلی خیلی ممنون می‌شم.

ضمیمه 144160

به تصویر بالا دقت کنید. وقتی روی منوی خدمات کلیک می‌کنم زیر مجموعه‌های آن نمایش داده می‌شود. حالا اگر روی منوی محصولات هم کلیک کنم زیر مجموعه‌های آن نمایش داده می‌شود.
من می‌خواهم وقتی روی منوی محصولات کلیک می‌کنم منوی خدمات خود به خود بسته شود و به بیان دیگه به طور همزمان فقط زیر منوی یکی از منوها نمایش داده شود و با کلیک روی هر منو زیر مجموعه منوی
قبلی بسته شود.
من تا اینجا از این کد جاوا اسکریپت (جی‌کویری) استفاده کردم:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script>

(function($){

  var ico = $('<i class="caret-left"></i>');

  $('nav#menu li:has(ul) > a').append(ico);

  

  $('nav#menu li:has(ul)').on('click',function(){

    $(this).toggleClass('open');

  });

  

  $('a#toggle').on('click',function(e){

    $('html').toggleClass('open-menu');

    return false;

  });

  

  

  $('div#overlay').on('click',function(){

    $('html').removeClass('open-menu');

  })

  

})(jQuery)

</script>

لطفا کمک کنید تا بتونم این قابلیت را به این منو اضافه کنم...سپاسگزارم.