title: Prevent div inside of list item to slide up
body: <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>