当导航栏折叠时，启用自动停用时禁用下拉列表 [英] Disable dropdown on hover for bootstrap when navbar is collapsed

问题描述

我已经实现了css，如下所示：如何让鼠标悬停的twitter引导菜单下拉列表，而不是点击

I have implemented the css as shown here: How to make twitter bootstrap menu dropdown on hover rather than click

但是当导航栏崩溃时，要停用悬停的下拉列表有点麻烦。

However want to disable the dropdown on hover when the navbar collapses as it acts a bit buggy.

我该怎么做？

推荐答案

您可以尝试包装CSS以禁用媒体查询中的下拉列表，以便它只在某个页面宽度上禁用它...阅读媒体查询并尝试了解引导如何实现它们将成为关键调试这个这是我以前的答案的小提琴。

You could try wrapping the CSS to disable the dropdown in a media query so that it is only disabling it at a certain page width... Reading up on media queries and trying to understand how bootstrap implements them is going to be one the keys to debugging this. Here's what I tried with the previous answer's fiddle.

http://jsfiddle.net/2Smgv/5544 /

@media (min-width: 767px) {
 .sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

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

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
}
}

这篇关于当导航栏折叠时，启用自动停用时禁用下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！