Html 语义用户界面下拉式登录表单

我正在尝试使用语义UI框架为网站创建一个下拉式登录表单，但不知道是否有更好的方法。当前，表单位于菜单上的一个项目中，因此当您单击它时，下拉菜单将消失。这是我现在的代码：

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

登录
用户名
密码
登录

---

是否有其他方法可以将表单添加到下拉菜单中，而不使其成为下拉菜单上的实际项目？谢谢

我也有同样的问题。。。这是我的解决办法

<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，否则它将与输入的宽度匹配。

也遇到了同样的问题。感谢@MA206，我对他的解决方案做了一些改进

我认为关键是菜单必须有一个项目，表单不应该是该项目。因此，我认为使用另一个虚拟项目可能会有所帮助

然而，要实现完美的下拉式登录表单，还存在一些其他问题。它似乎没有表现出预期的反应。我不知道怎么解决这个问题

这是我的解决方案：

$（函数（）{
$（'.ui.dropdown'）.dropdown（）；
$（'form#sign'）。表格({
字段：{
用户标识：{
标识符：“userID”，
规则：[{
键入：“空”，
提示：“请输入您的用户名。”
}, {
键入：“regExp”，
值：/^[a-z0-9\\\\\]+$/i，
提示：`您只能使用'a'-'z'、'a'-'z'、'0'-'9'、'uuz'
为您的用户名`
}]
},
密码：{
标识符：“密码”，
规则：[{
键入：“minLength[6]”，
提示：“您的密码必须至少包含6个字符。”
}, {
键入：“regExp”，
值：/^[a-z0-9\\\.]+$/i，
提示：`您只能使用'a'-'z'、'a'-'z'、'0'-'9'、'u'、'@'，'
请输入您的密码`
}]
}
}
});
$（'form#signIn input'）。向下键（函数（e）{
如果（e.which==13）{
$（'form#sign'）。提交（）；
返回false；
}
});
});

登录
登录
注册
我也想这样做。你找到解决办法了吗？@Nanego很遗憾，还没有找到。我找到了这个答案，但我不知道如何/在哪里使用它。