Pure css - Nesting forms in 'float:right' dropdown menu item

Question

Two things,

1. Nesting a form inside a menu item works except it hides again of the mouse moves from the form div.

2. 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

   <div class="home-menu pure-menu pure-menu-horizontal">
     <a class="pure-menu-heading pure-menu-link" href="/">My Hip New Brand</a>
   
     <ul class="pure-menu-list">
       <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
       <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact Us</a></li>
       <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
     </ul>
   
     <ul class="pure-menu-list" style="float:right">
       <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"><a href="#" class="pure-menu-link">Sign In</a>
   
         <form action="/login" method="POST" class="pure-form pure-menu-children">
           <fieldset class="pure-group">
             <input name="username" type="text" placeholder="Username" class="pure-input-2-1" required/>
             <input name="password" type="password" placeholder="Password" class="pure-input-2-1" required/>
           </fieldset>
   
           <button type="submit" class="pure-button pure-input-2-1 pure-button-primary">Sign In</button>
         </form>
   
       </li>
     </ul>
   </div>
   

EDIT: jsfiddle can be found here