CSS: Dropmenu with Login

Navigation
1

I have a drop menu: hover for a div that contains 2 input, login and password, and two buttons, so when I try to type something in the div (which appeared with the li hover) it disappears ...

Is there something I can do to make it stay, and just quit when I click somewhere else or take the mause? 

.box-login { position: absolute; width: 250px; z-index: 9;  left: 500px; top: 65px; display: none; }
.link-login:hover li div{ display: block; }

<a href="" class="link-login"><li class="ico-login">Login
<div class="box-login">
<div class="row">
    <div class="col-xs-12"><span class="tooptip"></span></div>
</div>
<div class="box-login-centro">
    <div class="row">
        <div class="col-xs-12 text-center"><img src="img/icon10.png" alt=""></div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="row" style="margin-left: 10px;">
                <div class="col-xs-2 box-login-img icon-box-login"></div>
                <div class="col-xs-10"><input type="text" name="" id="" placeholder="E-mail"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="row" style="margin-left: 10px;">
                <div class="col-xs-2 box-login-img icon-box-senha"></div>
                <div class="col-xs-10"><input type="password" name="" id="" placeholder="Senha"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-6"><button style="margin-right: -10px; background-color: #38b970;">Entrar</button></div>
                <div class="col-xs-6"><button style="position: absolute; margin-left: -115px; background-color: #d94843;">Cadastrar</button></div>
            </div>
        </div>
    </div>
</div>

    

    
asked by anonymous 25.01.2015 / 03:51

1 answer

0

Test this and adapt to your code: 

        
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
                <script language="javascript">
                    $('.dropdown-toggle').dropdown();
                    $('.dropdown-menu').find('form').hover(function (e) {
                        e.stopPropagation();
                      });
                </script>
                    <style>
                
                /* ISTO FAZ O QUE VOCÊ PEDE*/
                      
                    .dropdown:hover .dropdown-menu {
                        display: block;
                     }
                
                /* ISTO APROXIMA O FORM DO MENU, PARA EVITAR BUG NA HORA DO HOVER*/
                /* Esse css fica em: Bootstrap.min.css*/
                /* Não irá funcionar aqui! */

                dropdown-menu {
                position: absolute;
                top: 90%!important;
                 }
                    </style>
        
                <div class="navbar navbar-fixed-top">
                  <div class="navbar-inner">
                    <div class="container-fluid">      
                      <div class="nav-collapse">
                        <ul class="nav">
                          <li class="active"><a href="#">Home</a></li>
                          <li><a href="#about">About</a></li>
                          <li><a href="#contact">Contact</a></li>
                 
                          <!-- here comes the important part -->
                 
                           <li class="dropdown" id="menu1">
                             <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
                               Login
                                <b class="caret"></b>
                             </a>
                             <div class="dropdown-menu">
                               <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                                 <fieldset class='textbox' style="padding:10px">
                                   <input style="margin-top: 8px" type="text" placeholder="Username" />
                                   <input style="margin-top: 8px" type="password" placeholder="Passsword" />
                                   <input class="btn-primary" name="commit" type="submit" value="Log In" />
                                 </fieldset>
                               </form>
                             </div>
                           </li>
                 
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
    
25.01.2015 / 04:04
Line graph does not render (p: lineChart) [closed] List Dates Online Schedules in a Table