megamenu - jQuery: menus appear/disappear on click -

i've been looking on web , can't find solution. new jquery well.

my case:

i have nav bar, each link in activates/triggers megamenu (each link has own megamenu).

what need:

i need way have each link activate own megamenu, megamenu should close when:

1. the user clicks on item in nav bar.

2. the user clicks on same item in nav bar.

3. the user clicks on 'close button' (x) graphic inside megamenu (not shown in html simplicity sake).

html:

<div id="top-nav">  <ul>   <li><span>products &amp; services</span>     <ul>       <li><div class="megamenu">content here...</div></li>     </ul>   </li>   <li><span>support &amp; training</span>     <ul>      <li> <div class="megamenu">content here...</div></li>     </ul>   </li>   <li><span>communities</span>     <ul>      <li> <div class="megamenu">content here...</div></li>     </ul>   </li>   <li><span>store</span>     <ul>       <li><div class="megamenu">content here...</div></li>     </ul>   </li>  </ul> </div> 

i've seen script of 'sexy drop down menu' problem closes menu triggered click on hover, , said, i'm new jquery , can't figure out way adapt need.

http://www.sohtanaka.com/web-design/examples/drop-down-menu/

any appreciated.

thanks.

you attach click handler item/same item/close button read this:

$(function(){     $('#top-nav span').click(function(){         divtrigger = $('#top-nav span').index(this);         thismegamenu = $('.megamenu:eq('+divtrigger+')');         $('.megamenu').slideup(200);         if(thismegamenu.is(":not(':visible')")){         thismegamenu.slidedown(200);         } });     $('.megamenu').append("<a href=# id=closebutton>x</a>");     $('#closebutton').live('click',function(){         thismegamenu.slideup(200);     }); }); 

try out here