将鼠标悬停在其上时，如何显示注册/登录字段

Question

#aanmelden:hover {

}

#inloggen:hover {

}

<ul class="nav navbar-nav navbar-right">
	<li id="aanmelden"><a href="#">Sign Up</a></li>
	<li id="inloggen"><a href="#">Log In</a></li>
	</ul>

当您将鼠标悬停在登录/注册时，必须显示注册/登录表单。
我是否必须首先隐藏表单，当我将鼠标悬停显示时？ 登录/注册表单将与幻灯片重叠。

提前致谢！

Answer 1

HTML

<ul class="nav navbar-nav navbar-right">
        <li id="aanmelden"><a href="#">Sign Up</a>
            <div class="drop">
                <input type="text">
            </div>
        </li>
        <li id="inloggen"><a href="#">Log In</a>
             <div class="drop">
                <input type="text">
            </div>
           </li>
    </ul>

CSS

.drop{
    display: none;
}
li:hover .drop{
    display: block;
}

fiddle link