当我尝试悬停时，导航下拉列表一直消失

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

将子菜单位推到主li上，使菜单保持在悬停状态。

将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

Answer 2

使用此：

.navigation_items li:hover > ul,
.navigation_items li > ul:hover {
    display: block;
    margin-top: -10px;
}

而不是这个：

.navigation_items li:hover > ul {
    display: block;
}

Answer 3

.navigation_items ul {
    display: none;
    margin-top: -10px;
}