Dropdown menu loads before clicking - html

Question

I am trying to make a dropdown menu, where you have to click before the dropdown menu shows up. But everytime I load the page, the dropdown menu also loads. I have really tried to look through my code, and I have a feeling it is in the start of the code.
Can anybody see what is wrong in this code?
<li class="dropdown">
<a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
"dropdown" data-toggle="dropdown" href="#">Feature <i class="fa fa-angle-down"></i>
</a>
<!--container start-->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Forgot Password?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
<p>or you can sign in via social network</p>
<div class="login-social-link">
<a href="index.html" class="facebook">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a href="index.html" class="twitter">
<i class="fa fa-twitter"></i>
Twitter
</a>
</div>
<div class="registration">
Don't have an account yet?
<a class="" href="registration.html">
Create an account
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</form>
</div>
</div>
</div>
<!--container end-->
</li>
<!-- /li dropdown for login -->
</ul>
<!-- /ul for navigationbar -->
</div>
</div>
</header>
<!--header end-->

Answer 1

Below is standard code from bootstrap you can use it for your dropdown.
<ul>
<li class="dropdown">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Feature <i class="fa fa-angle-down"></i>
</a>
<!-- your dropdown container start-->
<div class="login-bg dropdown-menu" aria-labelledby="dLabel">
<div class="container">
<!-- your html code can be here -->
</div>
</div>
</li>
</ul>
Hope it help you to solve your problem.
If you still have query please post your proper html or create fiddle / bootply snippet here