menu toggle not functioning jquery
<p>On clicking the <code>li</code> or <code>href</code>, the menu should open. It's a horizontal menu with one <code>ul</code> and multiple <code>li</code>'s contained in a <code>div</code>. Might be able to do it with multiple <code>ul</code>'s but I would rather not, as it is too code heavy.</p>

<p>HTML</p>

<pre><code>   &lt;ul id="mainmenu" style="width:720px"&gt;

    &lt;!-- 1Open --&gt;
          &lt;li id="mainmenudrop"&gt;&lt;a href class="drop"&gt;helloooo&lt;/a&gt;
             &lt;div style="width:200px height:40px; background:#000000;"&gt;hmmmmfyhyf
&lt;/div&gt;
         &lt;/li&gt;
    &lt;!-- 1 Close --&gt;
    &lt;!-- 2nd Open --&gt;
         &lt;li&gt;&lt;a href="" class="drop"&gt;hello&lt;/a&gt;
            &lt;div style="width100px; height:40px; background:#000000;"&gt;
              yhythyytyt
              &lt;/div&gt;
            &lt;/div&gt;&lt;/li&gt; 
    &lt;!-- 2nd Close --&gt; 
&lt;/ul&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(function() {
    var toggleMenu = function(e) {
        var self = $(this),
            elemType = self[0].tagName.toLowerCase(),
            //get caller
            menu = null;
        if (elemType === 'a') {
            //anchor clicked, nav back to containing ul
            menu = self.parents('li').not('li#mainmenudrop');
        } else if (elemType === 'li') {
            //mouseleft ul, ergo menu is this.
            menu = self;
        }
        if (menu) {
            menu.hide('medium');
        }
        e.preventDefault();
        return false;
    };
    $(document).ready(function() {
        $('href.drop').click(function(e) {
            $('li#mainmenudrop li').show('medium');
            console.log('div clicked');
            e.preventDefault();
            return false;
        });
        $('li#mainmenudrop a').click(toggleMenu);
        $('li#mainmenudrop li').mouseleave(toggleMenu);
    });
});
</code></pre>
