Is there a way to simplify this jquery?
<p>I wrote a dropdown menu with the following structure. It is supposed to drop down on click, and close on click.</p>

<p>Here's the HTML</p>

<pre><code>&lt;ul id="nav" class="nav"&gt;
    &lt;li&gt;
        &lt;a id="menu1" class="menu"&gt;MENU 1&lt;/a&gt; &lt;!-- top menu --&gt;
        &lt;div id="submenu1" class="submenu"&gt; &lt;!-- hidden by default --&gt;
            &lt;a href="#"&gt;SUBMENU ITEM 1&lt;/a&gt; &lt;!-- submenu item --&gt;
            &lt;a href="#"&gt;SUBMENU ITEM 2&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;

    &lt;li&gt;
        &lt;a id="menu2" class="menu"&gt;MENU 2&lt;/a&gt;
        &lt;div id="submenu2" class="submenu"&gt;
            &lt;a href="#"&gt;SUBMENU ITEM 1&lt;/a&gt;
            &lt;a href="#"&gt;SUBMENU ITEM 2&lt;/a&gt;
            &lt;a href="#"&gt;SUBMENU ITEM 2&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And that's the JavaScript (using jQuery)</p>

<pre><code>$("#menu1").click(function() {
    $("div.submenu").hide(); // hide all menus
    $("#submenu1").toggle(); // open this menu
});
$("#menu2").click(function() {
    $("div.submenu").hide(); // hide all menus
    $("#submenu2").toggle(); // open this menu
});
$("#menu3").click(function() {
    $("div.submenu").hide(); // hide all menus
    $("#submenu3").toggle(); // open this menu
});
$("#menu4").click(function() {
    $("div.submenu").hide(); // hide all menus
    $("#submenu4").toggle(); // open this menu
});

$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("nav"))
    $("div.submenu").hide();
});
</code></pre>

<p>There is a lot of repetition in the first part of the JS, is there a way to make this shorter, nicer, better?</p>
