I have a form in the drop down and I can't edit the fields without it dissapearing after clicking. Here is the code

Code:
						<a data-toggle="dropdown" href="ace/#" class="dropdown-toggle" >
								<img class="nav-user-photo" src="ace/assets/avatars/user.jpg" alt="Jason's Photo" />
								<span class="user-info">
								<?php if ($user=="") {echo"<small>Register!,</small>Guest!";}else{echo"<small>Welcome,</small>User!";}?>
								</span>

								<i class="icon-caret-down"></i>
							</a>
							

						<?php if ($user_id == "") {?>
						            <div class="dropdown-menu"  style="padding: 15px; padding-bottom: 0px;">
                <form action="index.php" method="post"> 
                    Username:<br /> 
                    <input type="text" name="username" class="dropdown" value="<?php echo $submitted_username; ?>" /> 
                    <br />
                    Password:<br /> 
                    <input type="password" name="password" class="dropdown" value="" /> 
                    <br />
                    <input type="submit" class="btn btn-info" value="Login" /> 
                </form> 
            </div>
      <script type="text/javascript">
$('.dropdown-menu input').click(function(event){
	event.stopPropagation();
});
</script>