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，以使其恢复到相同的用户界面外观。

.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;
}

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

3 个答案: