Bootstrap navbar dropdown login

Question

Je veux créer un formulaire de connexion et d'inscription. J'ai lu plusieurs sujets sur ce site et rien ne semblait fonctionner pour moi.

Voici à quoi il ressemble actuellement:

Je veux que le formulaire soit juste au-dessus lien de connexion. J'ai remarqué que lorsque je clique sur l'espace blanc autour des champs de saisie du nom d'utilisateur et du mot de passe, le formulaire disparaît et je dois le relancer en cliquant sur Connexion. Comment puis-je résoudre ce problème?

Voici mon code pour navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
<a class="navbar-brand" href="#"><img src="http://shrani.si/f/46/2Q/2Ps2wfOq/camera.png"></a> 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Photo Master</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Upload Your Own</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Contact</a> 
     </li> 
    </ul> 
    <ul class="navbar-nav mr-right"> 
     <li class="nav-item"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Login 
      </a> 
      <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;"> 
       <form class="form-horizontal" method="post" accept-charset="UTF-8"> 
        <input class="form-control login" type="text" name="username" placeholder="Username.." /><br> 
        <input class="form-control login" type="password" name="password" placeholder="Password.."/><br> 
        <input class="btn btn-primary" type="submit" name="submit" value="Login" /> 
       </form> 
      </div> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Register 
      </a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search..." aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
</div> 

Et un court code CSS pour le dénommer:

.login { 
    margin-bottom:5px; 
} 
.dropdown-menu { 
    width: 300px !important; 
} 

Answer 1

L'élément de navigation a besoin de la classe dropdown ..

https://www.codeply.com/go/o7Ys06Z3c9

 <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Login 
      </a> 
      <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;"> 
       <form class="form-horizontal" method="post" accept-charset="UTF-8"> 
        <input class="form-control login" type="text" name="username" placeholder="Username.."><br> 
        <input class="form-control login" type="password" name="password" placeholder="Password.."><br> 
        <input class="btn btn-primary" type="submit" name="submit" value="Login"> 
       </form> 
      </div> 
     </li>