Prevent div inside of list item to slide up
<p>In my menu i have a list item with login fields : </p>

<pre><code>                                 &lt;li class='has-sub' onclick="LoginButtonClicked()" style="float: right"&gt;
                                     &lt;a href='#' id="notificationList"&gt;
                                         &lt;span&gt;Log in2&lt;/span&gt;

                                     &lt;/a&gt;
                                     &lt;ul class="loginBox" style="display: none; height: 300px; overflow-y: auto;"&gt;
                                         &lt;li&gt;
                                             &lt;div id="Div1" style="background: #0fa1e0; padding: 4px;"&gt;

                                                 &lt;input type="text" value="LoginName" /&gt;

                                                 &lt;input type="text" value="Password" /&gt;
                                             &lt;/div&gt;

                                         &lt;/li&gt;
                                     &lt;/ul&gt;
                                 &lt;/li&gt;
</code></pre>

<p>when i click on li class LoginButtonClicked function gets fired and ul slides down: </p>

<pre><code>var loginUserMenuChoosen = false;

function LoginButtonClicked() {
    console.log(loginUserMenuChoosen);
    if (loginUserMenuChoosen == false) {
        loginUserMenuChoosen = true;


        $('.loginBox').slideDown(200);


        //$('.masterPageNotifier').val("0");
    }
    else if (loginUserMenuChoosen == true) {
        loginUserMenuChoosen = false;
        $('.loginBox').slideUp(200);
    }
}
</code></pre>

<p>The problem here is, that when i select text fields inside list item it also keep sliding up. how do i prevent this? </p>

<p>here is a fiddle <a href="http://jsfiddle.net/fAKzw/" rel="nofollow">http://jsfiddle.net/fAKzw/</a></p>
