[jQuery] Clickable dropdown lists

[christopher.m.t...@gmail.com]

Hi everyone!

I'm trying to work out a drop down list and can't seem to figure this
thing out.  So, here's my code:

var menuclicked = 0;

$('#dropDown1').click( function() {
        if( menuclicked == 1) {
                menuclicked = 0;
                $(this).find('ul').css('visibility', 'hidden');
        }else{
                $(this).find('ul').css('visibility', 'visible');
                menuclicked = 1;}
});

and my html

<ul id="dropDown1" class="dropDown">
       <li><a href="#" class="selectLink">Select from the list</a>
          <ul id="dropDown1sub">
                 <li><a href="">Leukemia</a></li>
                 <li><a href="">Breast Cancer</a></li>
                 <li><a href="">Lung Cancer</a></li>
                 <li><a href="">Colon Cancer</a></li>
                 <li><a href="">Prostate Cancer</a></li>
                 <li class="lastList"><a href="">View more Topics</a></
li>
          </ul>
    </li>
</ul>


This works fine, but I need two things to occur.  First, hide the
nested ul if the user clicks on the document while it's open.  Second,
behave like multiple lists on a page wherein it closes if another list
is accessed.

Can I get a little help?