title: Pure css - Nesting forms in 'float:right' dropdown menu item
body: <p>Two things,</p>
  
  <ol>
  <li>Nesting a form inside a menu item works except it hides again of the
  mouse moves from the form div.</li>
  <li><p>This form menu item is right aligned and the form left-most margin
  is aligned with the left-most margin of the button so the actual
  form flows beyond the window</p>
  
  <pre><code>&lt;div class="home-menu pure-menu pure-menu-horizontal"&gt;
    &lt;a class="pure-menu-heading pure-menu-link" href="/"&gt;My Hip New Brand&lt;/a&gt;
  
    &lt;ul class="pure-menu-list"&gt;
      &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;ul class="pure-menu-list" style="float:right"&gt;
      &lt;li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"&gt;&lt;a href="#" class="pure-menu-link"&gt;Sign In&lt;/a&gt;
  
        &lt;form action="/login" method="POST" class="pure-form pure-menu-children"&gt;
          &lt;fieldset class="pure-group"&gt;
            &lt;input name="username" type="text" placeholder="Username" class="pure-input-2-1" required/&gt;
            &lt;input name="password" type="password" placeholder="Password" class="pure-input-2-1" required/&gt;
          &lt;/fieldset&gt;
  
          &lt;button type="submit" class="pure-button pure-input-2-1 pure-button-primary"&gt;Sign In&lt;/button&gt;
        &lt;/form&gt;
  
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre></li>
  </ol>
  
  <p><strong>EDIT:</strong> jsfiddle can be found <a href="https://jsfiddle.net/rocrn76u/" rel="nofollow noreferrer">here</a></p>