html - 悬停时的下拉菜单消失(使用 Bootstrap )

Question

我在 bootstrap 的帮助下做了一个导航。使用 CSS，我制作了一个悬停时出现的子菜单。只有当我想点击子菜单中的一个标题时，子菜单在我点击它之前就消失了。

我在其他线程上读到我必须将以下内容添加到 css:

.dropdown:hover  > .dropdown-menu {
display: block;

我添加了它，但它仍然无法正常工作。我做错了什么？

这是 fiddle :http://jsfiddle.net/robin2609/buw4wc1t/

克。罗宾

Answer 1

发生这种情况是因为您的内边距仅向下 10px，然后您的子菜单位于灰色下方。虽然您的填充没有到达主菜单的末尾，因此当悬停从 .nav > li > a 上移开时，它现在只悬停在 .nav 上，这不会不要让子菜单保持打开状态。

更改填充:

.nav > li > a

到:

.nav > li > a
{
    padding: 10px 13px 30px 13px;
}

工作 JSFiddle:http://jsfiddle.net/buw4wc1t/3/