inputbox in dropdown menu for log in form

inputbox in dropdown menu for log in form

I m creating a web page. In my header class i have an login button . when
i clicked on button a dropdown box appears. in which i have two inputbox .
but when i clicked on input box my dropdown will become desable. why? my
code is......
<li class="dropdown nav navbar-nav ">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Log in<b class="caret"></b></a>
<ul class="dropdown-menu" style=" padding:10%;">
<label class="labelstyle">
First Name: <input name="fname" autofocus type="text" class="active"
id="myinputbox1" size="25" maxlength="50" autofocus/>
</label> <label class="labelstyle">
password: <input name="fname" type="text" class="fieldstyle"
id="myinputbox2" size="25" maxlength="50"/>
</label>
<li class="divider"></li>
<li><button href="#" class="btn btn-success">log in</button>
<button href="#" class="btn btn-success"
style="float:right;">Cancel</button></li>
</ul>