Semantic UI Dropdown Форма входа

Question

Я пытаюсь создать раскрывающуюся регистрационную форму для веб-сайта, используя структуру семантического интерфейса, и не могу понять, есть ли лучший способ сделать это. В настоящее время форма находится в элементе в меню, поэтому, когда вы нажимаете на нее, выпадающее меню исчезает. Это мой код прямо сейчас:

 <div class="ui dropdown">Login 
     <div class="dropdown menu"> 
     <div class="item"> 
      <form class="ui form"> 
      <div class="ui stacked segment"> 
       <div class="ui one column middle aligned very relaxed stackable grid"> 
       <div class="column"> 
        <div class="ui form"> 
        <div class="field"> 
         <label>Username</label> 
         <div class="ui left icon input"> 
         <input placeholder="Username" type="text"> 
         <i class="icon-user-tie icon"></i> 
         </div> 
        </div> 
        <div class="field"> 
         <label>Password</label> 
         <div class="ui left icon input"> 
        <input placeholder="Password" type="password"> 
        <i class="icon-lock icon"></i> 
       </div> 
       </div> 
       <div class="ui blue submit button">Login</div> 
      </div> 
      </div> 
     </div> 
     </div> 

      </form> 
     </div> 
     </div> 
    </div> 

Есть еще один способ, чтобы добавить форму в выпадающем меню, не делая его фактический элемент в раскрывающемся меню? Благодаря!

Answer 1

У меня была такая же проблема ... Вот мое решение

<div class="ui teal buttons"> 
    <div class="ui button">Login</div> 
    <div class="ui floating dropdown icon button"> 
     <i class="dropdown icon"></i> 

     <div id="login-form" class="menu"> 
      <div class="ui basic segment"> 
       <form class="ui form"> 
        <div class="field"> 
         <input type="text" name="username" placeholder="Username"> 
        </div> 
        <div class="field"> 
         <input type="password" name="password" placeholder="Password"> 
        </div> 
        <div class="item fluid"> 
         <button class="ui fluid button" type="submit">Submit</button> 
        </div> 
       </form> 
      </div> 
     </div> 

    </div> 
</div> 

Я тогда стиле логин-форму, чтобы иметь ширину 300px, в противном случае она совпадает с шириной входов.