0

2つのこと、

  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はここにあります

4

0 に答える 0