html - 当我尝试悬停时，导航下拉菜单不断消失

Question

基本上我做了一个非常好的导航栏和所有内容，但是我制作的下拉菜单不起作用，它显示在我的社区选项卡上，但是当我尝试将鼠标悬停在它上面时它消失了:(

有人知道我该如何解决吗？

这是我的代码:

<div class="navigation">
            <ul class="navigation_items">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="about.html">What we do</a></li>
                <li>
                    <a>Community</a>
                    <ul>
                        <li><a>Forums</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

检查jsfiddle中的css代码

http://jsfiddle.net/8a92u/

Answer 1

将子菜单位推到主菜单上，使其在悬停时保留菜单。

将 margin-top:-10px 添加到子菜单 ul 和 padding-top: 10px 以使其返回相同的 UI 外观。

.navigation_items ul {
    background-color: rgb(28, 28, 28);
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    margin-top: -10px;
    padding-top: 10px;
}

DEMO