Dropdown Button and login form

temp "menu-7.html" have login form on hover:

			<!-- Top Links
					============================================= -->
					<div class="top-links">
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="faqs.html">FAQs</a></li>
							<li><a href="contact.html">Contact</a></li>
							<li><a href="login-register.html">Login</a>
								<div class="top-link-section">
									<form id="top-login" role="form">
										<div class="input-group" id="top-login-username">
											<span class="input-group-addon"><i class="icon-user"></i></span>
											<input type="email" class="form-control" placeholder="Email address" required="">
										</div>
										<div class="input-group" id="top-login-password">
											<span class="input-group-addon"><i class="icon-key"></i></span>
											<input type="password" class="form-control" placeholder="Password" required="">
										</div>
										<label class="checkbox">
										  <input type="checkbox" value="remember-me"> Remember me
										</label>
										<button class="btn btn-danger btn-block" type="submit">Sign in</button>
									</form>
								</div>
							</li>
						</ul>
					</div><!-- .top-links end -->

how can use login form like this separately. i have link and on hover it will be login form, or i have Bootstrap Dropdown Buttons and on click it will be login form

i didn't untested how can i do that in Popover Element was login form :(

this work and thank you , but i want add this form in this dropdown-toggle btn

						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
							<ul class="dropdown-menu" role="menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</div>

i do it like this

<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
							<ul class="dropdown-menu" role="menu">
								<li>

<form id="top-login" role="form">
    <div class="input-group" id="top-login-username">
        <span class="input-group-addon"><i class="icon-user"></i></span>
        <input type="email" class="form-control" placeholder="Email address" required="">
    </div>
    <div class="input-group" id="top-login-password">
        <span class="input-group-addon"><i class="icon-key"></i></span>
        <input type="password" class="form-control" placeholder="Password" required="">
    </div>
    <label class="checkbox">
      <input type="checkbox" value="remember-me"> Remember me
    </label>
    <button class="btn btn-danger btn-block" type="submit">Sign in</button>
</form>

</li>
							</ul>
						</div>

but i is not good visible , seeattachment