title: Dropdown login menu in navbar in bootstrap 3?
body: <p>I am new to using bootstrap 3 and experimenting to get this work. but I am not there quite yet.
  I want to have dropdown log-in in navbar as shown <a href="http://www.bootply.com/60886" rel="nofollow noreferrer">here</a>. but this is for bootstrap 2.* and does not work in bootstrap 3.</p>
  
  <p>My current attempt here:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;SiteTitle&lt;/title&gt;
      &lt;meta name"viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="keywords" content=""&gt;
  
      &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function()
  {
    //Handles menu drop down
    $('.dropdown-menu').find('form').click(function (e) {
          e.stopPropagation();
          });
    });
  &lt;/script&gt;
      &lt;style&gt;
        .navbar .nav &gt; li &gt; .dropdown-menu::before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #CCC;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }
  
  .navbar .nav &gt; li &gt; .dropdown-menu::after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="navbar-collapse collapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" id="register" data-toggle="dropdown"&gt;Login &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;div class="dropdown-menu" style="width: 400px"&gt;
                  &lt;form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /&gt;&lt;/div&gt;
                   &lt;fieldset class='textbox' style="padding:10px"&gt;
                     &lt;input style="margin-top: 8px" type="text" placeholder="Username" /&gt;
                     &lt;input style="margin-top: 8px" type="password" placeholder="Passsword" /&gt;
                     &lt;input class="btn-primary" name="commit" type="submit" value="Log In" /&gt;
                   &lt;/fieldset&gt;
                 &lt;/form&gt;
              &lt;/div&gt; &lt;!-- /dropdown-menu --&gt;
          &lt;/li&gt; &lt;!-- /dropdown --&gt;
          &lt;!--(here goes another dropdown)--&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /navbar-collapse --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It isn't  like what is above;</p>
  
  <p><img src="https://i.stack.imgur.com/vf0Mc.png" alt="enter image description here"></p>
  
  <p>How to fix this. or any link to code snippet that works with bootstrap 3 would be nice
  Thanks</p>