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

标签 html css twitter-bootstrap

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

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

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

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

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

克。罗宾

最佳答案

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

更改填充:

.nav > li > a

到:

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

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

关于html - 悬停时的下拉菜单消失(使用 Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27232985/

相关文章:

html - 停止文本在移动菜单后面滚动

javascript - 两个IF条件可以同时工作吗

jquery - 在第一句中添加一个元素

HTML5 Canvas 文本与具有 CSS3 样式的普通文本?

javascript - 如何在 Angular 列中使用ng-repeat?

twitter-bootstrap - Bootstrap : anchors and body top margin/padding

javascript - 如何使按钮同时具有打开和关闭功能?

html - 在 div 中居中按钮

javascript - html5视频检测结束然后反向播放? JQuery 和 Javascript

css - bootstrap,具有 rowspan 的复杂嵌套列