0

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

candronikos
  • 159
  • 1
  • 13
  • Welcome to Stack Overflow! You can take the [tour](http://stackoverflow.com/tour) first and learn [How to Ask a good question](http://stackoverflow.com/help/how-to-ask) and create a [Minimal, Complete, and Verifiable](http://stackoverflow.com/help/mcve) example. It will be easier for us to help you. – Alexandre Tranchant Jan 08 '17 at 07:52
  • I will edit the question to include an example – candronikos Jan 08 '17 at 07:55
  • Ideally, what would be really helpful would be posting the associated code as well as a jsfiddle link or something like that that demonstrates the problem. That way it's convenient for someone to play with the jsfiddle demo, but future people aren't reliant on the jsfiddle link still working. – Anthony Mills Jan 08 '17 at 08:05
  • Ok, i'll do it. But only because it's you – candronikos Jan 08 '17 at 09:41
  • Done, my good man – candronikos Jan 08 '17 at 09:44
  • Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in the question itself instead. – Quentin Jan 08 '17 at 09:50
  • It doesn't depend on the jsfiddle link per se. I just pasted the code above there with the purecss js script included so that anyone viewing this question can play with the code in the browser – candronikos Jan 08 '17 at 10:43

0 Answers0