html - 纯 css - 'float:right' 下拉菜单项中的嵌套表单

Question

两件事情，

1. 将表单嵌套在菜单项内是可行的，只是它再次隐藏了鼠标从表单 div 移动的情况。

2. 这个表单菜单项是右对齐的，并且表单最左边的边距与按钮的最左边边距对齐，因此实际的表单会超出窗口

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

编辑： jsfiddle可以在这里找到