I want to make a menu in a HEAD with a dropdown, I'm trying to customize a bootstrap code but without success follows the code:
* {
padding: 0;
border: 0;
box-shadow: 0;
list-style: none;
margin: 0;
}
header {
background-color: black;
width: 100%;
height: 30px;
}
header div ul li a {
color: #ffffff;
text-align: right;
height: 15px;
border: 1px solid;
}
.form-login {
padding: 1em;
min-width: 280px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><body><header><divclass="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li id="registro">
<a href="#"><i class="glyphicon glyphicon-plus-sign"></i> Registro</a>
</li>
<li class="dropdown" id="entrar">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Entrar</a>
<div class="dropdown-menu form-login stop-propagation">
<div class="form-group">
<label for="exampleInputEmail1"><i class="glyphicon glyphicon-envelope"></i> Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="exampleInputPassword1"><i class="glyphicon glyphicon-lock"></i> Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>
</div>
<li>Telefone: 555-658969</li>
</ul>
</div>
</header>
</bodyHere's a picture of how you are currently, for a better understanding.
I want it to be aligned with the header that has height 30px at the top.
how do I make this customization?