Tengo desarrollado un menú similar a facebook y twitter la función es la siguiente:
- Si das clic en el enlace aparece si vuelves a dar clic de nuevo en el mismo enlace desaparece.
- Si das clic en el enlace aparece si das clic en un campo vació
body
desaparece.
Ahora este menú funciona correctamente no necesita ningún cambio para menú en configuraciones o para otro tipo de desarrollo es perfecto.
Ahora el problema es que trate implementar un formulario en el menú pero al dar clic en el campo input
este me lo escode u desaparece.
código html
<div id="login">
<ul>
<li id="dropdown2"><a href="#">Iniciar sesión <b class="caret"></b></a>
<ul class="dropdown-menu">
<form>
<input type="email" name="email">
<input type="password" name="password">
<button>Iniciar Sesión</button>
</form>
</ul>
</li>
</ul>
</div>
estilo css
#login ul {
float:left;
width:100%;
padding:0px;
}
#login ul li {
float:left;
position:relative;
list-style:none;
}
#login ul li a {
color: #999999;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}
#login ul li a:hover {
color: #ffffff;
}
#login .dropdown-menu {
display: none;
left: -75px;/*10*/
position: absolute;
top:25px;/*35*/
width:140px;
background-color:#FFFFFF;
background-color: rgba(255,255,255,0.98);
background-clip: padding-box;
border-radius:5px;
/*border: 1px solid #e1e8ed;*/
border: 0 solid rgba(0,0,0,0.25);
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#login .dropdown-menu:after {
border-bottom-color: rgba(255,255,255,0.98);
border-bottom: 6px solid #FFFFFF;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
content: "";
left: 115px;/*10*/
position: absolute;
top: -6px;
}
#login {
float: left;
}