jQuery: onclick drop-down menu with controls
<p>I wish to create a menu (a sign-up menu), see <a href="http://jsfiddle.net/X2NXY/1/" rel="nofollow">this</a> to get an idea of it. When user clicks on this button/link a drop-down menu appears, using which he can do something (here login). </p>

<p>The behaviour of the link should be the following:</p>

<ol>
<li>The drop-down menu should appear when clicked on this button/link.</li>
<li>when clicked anywhere on the page (including the button/link itself), but outside the menu, the menu should disappear.</li>
<li>If clicked somewhere on the drop-down menu, the menu should not disappear.</li>
<li>All the controls in the drop-down menu should work.</li>
</ol>

<p>I did somehow managed to get first three working, but then the controls within the drop-down menu (4th behaviour) are not working.</p>

<p>The javascript/jQuery code along with html code is given <a href="http://jsfiddle.net/X2NXY/1/" rel="nofollow">here</a> (jsfiddle link, same as above). You can fork it and make changes.</p>

<p>Thanks.</p>
