Css 下拉菜单中的contactform

我尝试在下拉菜单中使用contactform。到目前为止，很好，我可以在菜单中使用它，但我不能用这种形式写任何东西

菜单每次关闭。我已经用

display:block

试过了，但不起作用。我能做些什么来解决这个问题。解决方案

以下是我的代码的一个例外：

          <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="index.html">Kontakt <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="nav-header">Kontaktiere mich</li>
                    <li class="contactform">
                        <section>
                            <form method="post" action="/" class="contactbox">
                                <div class="contactbox">
                                    <p><label>Dein Anliegen:</label><br>
                                    <textarea class="input-xsmall" id="textarea" rows="3"></textarea>

                                    <p><label>Dein Name:</label><br>
                                    <input type="text" required=""></p>

                                    <p><label>Deine E-Mail-Adresse:</label><br>
                                    <input type="email" required="" value=""></p>

                                    <button class="btn" type="submit">absenden</button>
                                </div>
                            </form>
                        </section>
                    </li>
                </ul>
          </li>

密歇根州康塔克提尔

邓安利根：

设计名称：


Deine电子邮件地址：


阿本登

您需要对单击以打开底部的链接进行一些更改：

<a data-toggle="dropdown" tabindex="1" class="dropdown-toggle" href="#">
    Kontakt <b class="caret"></b>
</a>

注意：单击Kontakt时，下拉菜单打开。如果您希望它也在悬停时打开，则需要

.dropdown-toggle:hover + .dropdown-menu, 
.dropdown-toggle:active + .dropdown-menu,
.dropdown-toggle:focus + .dropdown-menu, 
.dropdown-menu:hover {display: block;}

如注释中所述，此方法存在一个问题：在单击下拉列表内部，然后将光标移到下拉列表外部后。。。它关闭了。这无法修复，但有

---

。。。另一种方法是：使用带有标签的复选框而不是链接

<input data-toggle="dropdown" type='checkbox' name='dropdown-toggle' id='dropdown-toggle' class='dropdown-toggle'/>
<label for='dropdown-toggle'>Kontakt <b class="caret"></b></label>

---

演示

我不确定完全用css可以做到这一点。它有一些相似之处，但有一些其他复杂的因素。我们还需要查看您的css代码，理想情况下，您可以设置一个测试用例来使用解决方案。这可以仅使用css完成。我的答案中有一个方法。还可以使用复选框或单选按钮来代替链接：checked伪类和同级选择器：）谢谢！：-）还有一个小问题：当我点击一个标签，然后用curosr走出去时，菜单仍然关闭。这接近于一个解决方案（这与我的想法一致）。我遇到了一个bug（在Firefox中，不知道其他bug）。如果你点击一个

输入

字段，然后将鼠标向左移动超过“Kontakt”（不点击，只是移动），它就会消失。这不是一个bug，这是正常的。只要Kontakt按钮具有焦点或鼠标光标，该下拉列表就具有display:block。解决这个问题的唯一方法是不要使用链接——我也会做一个演示。

<input data-toggle="dropdown" type='checkbox' name='dropdown-toggle' id='dropdown-toggle' class='dropdown-toggle'/>
<label for='dropdown-toggle'>Kontakt <b class="caret"></b></label>

.dropdown-toggle, .dropdown-menu {display: none;}
.dropdown-toggle:checked ~ .dropdown-menu, .dropdown-menu:hover {display: block;}
.dropdown-toggle:focus {outline:none;}