关于css：如何在悬停而不是单击时使Twitter Bootstrap菜单下拉列表


How to make Twitter Bootstrap menu dropdown on hover rather than click

我想让我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想丢失菜单标题旁边的小箭头。

相关讨论

要让菜单自动悬停，可以使用基本的CSS实现。您需要将选择器设置为隐藏菜单选项，然后将其设置为当相应的li标记悬停在上方时显示为块。以Twitter引导页面为例，选择器如下：

1
2
3
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

但是，如果您使用的是引导程序的响应功能，那么您将不希望在折叠的导航栏上使用此功能(在较小的屏幕上)。要避免这种情况，请在媒体查询中包装上述代码：

1
2
3
4
5
@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

要隐藏箭头(插入符号)，根据您使用的是Twitter引导程序版本2和更低版本还是版本3，可以使用不同的方法进行隐藏：

引导3

要删除版本3中的插入符号，只需从.dropdown-toggle锚元素中删除html ：

1
2
    Dropdown
    <b class="caret">    <-- remove this line

引导程序2&更低

要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议您更详细地了解:after伪元素的工作原理。为了让你开始理解，瞄准并删除Twitter引导示例中的箭头，你将使用以下CSS选择器和代码：

1
2
3
a.menu:after, .dropdown-toggle:after {
    content: none;
}

如果你进一步研究这些如何工作，而不仅仅是使用我给你的答案，它将对你有利。

感谢@cocaakat指出我们缺少">"子组合器，以防止子菜单显示在父级悬停上。

相关讨论

我基于最新的(2.0.2版)引导框架创建了一个纯悬停下拉菜单，该框架支持多个子菜单，我认为我会将其发布给未来的用户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.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;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />


 
   
     
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     
      Project name
     
        <ul class="nav">
          <li class="active">Home
</li>

         
<li>
Link
</li>

         
<li>
Link
</li>

         
<li>
Link
</li>

          <li class="dropdown">
            Dropdown <b class="caret">
            <ul class="dropdown-menu">
             
<li>

                2-level Dropdown <i class="icon-arrow-right">
                <ul class="dropdown-menu sub-menu">
                 
<li>
Action
</li>

                 
<li>
Another action
</li>

                 
<li>
Something else here
</li>

                  <li class="divider">
</li>

                  <li class="nav-header">Nav header
</li>

                 
<li>
Separated link
</li>

                 
<li>
One more separated link
</li>

               
</ul>

             
</li>

             
<li>
Another action
</li>

             
<li>
Something else here
</li>

              <li class="divider">
</li>

              <li class="nav-header">Nav header
</li>

             
<li>
Separated link
</li>

             
<li>
One more separated link
</li>

           
</ul>

         
</li>

       
</ul>

        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
         
<li>
Link
</li>

          <li class="divider-vertical">
</li>

          <li class="dropdown">
            Menu
         
</li>

       
</ul>

     
      <!-- /.nav-collapse -->
   
 




<ul class="nav nav-pills">
  <li class="active">Regular link
</li>

  <li class="dropdown">
    Dropdown <b class="caret">
    <ul class="dropdown-menu" id="menu1">
     
<li>

        2-level Menu <i class="icon-arrow-right">
        <ul class="dropdown-menu sub-menu">
         
<li>
Action
</li>

         
<li>
Another action
</li>

         
<li>
Something else here
</li>

          <li class="divider">
</li>

          <li class="nav-header">Nav header
</li>

         
<li>
Separated link
</li>

         
<li>
One more separated link
</li>

       
</ul>

     
</li>

     
<li>
Another action
</li>

     
<li>
Something else here
</li>

      <li class="divider">
</li>

     
<li>
Separated link
</li>

   
</ul>

 
</li>

  <li class="dropdown">
    Menu
 
</li>

  <li class="dropdown">
    Menu
 
</li>


</ul>

演示

相关讨论

除了回答"我的头疼"(很好)之外：

1
2
3
ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

有两个遗留问题：

  • 单击下拉链接将打开下拉菜单。它将保持打开状态，除非用户单击其他地方，或者将鼠标悬停在上面，从而创建一个笨拙的用户界面。
  • 下拉链接和下拉菜单之间有1倍的边距。如果在下拉菜单和下拉菜单之间缓慢移动，则会导致下拉菜单隐藏。

    • (1)的解决方案是从导航链接中删除"class"和"data toggle"元素。

    1
    2
         Dropdown
         <b class="caret">

    这也使您能够创建到父页面的链接——这在默认实现中是不可能的。您只需将""替换为要发送给用户的任何页面。

    (2)的解决方案是删除.下拉菜单选择器上的页边顶端

    1
    2
    3
    .navbar .dropdown-menu {
     margin-top: 0px;
    }
    相关讨论

    我使用了一些jquery：

    1
    2
    3
    4
    5
    6
    // Add hover effect to menus
    jQuery('ul.nav li.dropdown').hover(function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
    }, function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
    });
    相关讨论

    只需在三行代码中自定义CSS样式

    1
    2
    3
    .dropdown:hover .dropdown-menu {
       display: block;
    }

    这里有很多非常好的解决方案。但我想我会继续把我的放在这里作为另一种选择。这只是一个简单的jquery片段，如果它支持鼠标悬停而不是单击，那么引导程序就可以这样做。我只在版本3中测试过这个，所以我不知道它是否可以在版本2中工作。在编辑器中将其保存为一个片段，并在按键时保存下来。

    1
    2
    3
    4
    5
    6
        $(function() {
            $(".dropdown").hover(
                function(){ $(this).addClass('open') },
                function(){ $(this).removeClass('open') }
            );
        });

    基本上，它只是说当你在下拉类上悬停时，它会向它添加开放类。那就行了。当您停止在具有下拉类的父级li或子级ul/li上徘徊时，它将删除打开的类。显然，这只是许多解决方案中的一个，您可以将其添加到其中，使其仅适用于.DropDown的特定实例。或者添加到父级或子级的转换。

    相关讨论

    如果有一个元素具有这样的dropdown类(例如)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    <ul class="list-unstyled list-inline">
        <li class="dropdown">
            <i class="fa fa-bars"> Dropdown 1
            <ul class="dropdown-menu">
               
    <li>
    Item 1
    </li>

               
    <li>
    Item 2
    </li>

               
    <li>
    Item 3
    </li>

               
    <li>
    Item 4
    </li>

               
    <li>
    Item 5
    </li>

           
    </ul>

       
    </li>

        <li class="dropdown">
            <i class="fa fa-user"> Dropdown 2
            <ul class="dropdown-menu">
               
    <li>
    Item A
    </li>

               
    <li>
    Item B
    </li>

               
    <li>
    Item C
    </li>

               
    <li>
    Item D
    </li>

               
    <li>
    Item E
    </li>

           
    </ul>

       
    </li>


    </ul>

    然后，您可以让下拉菜单在鼠标悬停时自动下拉，而不必单击其标题，方法是使用以下jquery代码片段：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
        $('.dropdown').hover(
            function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
            },
            function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
            }
        );

        $('.dropdown-menu').hover(
            function() {
                $(this).stop(true, true);
            },
            function() {
                $(this).stop(true, true).delay(200).fadeOut();
            }
        );

    这是一个演示

    这个答案依赖于@michael answer，我做了一些更改并添加了一些附加内容，以使下拉菜单正常工作。

    相关讨论

    [更新]这个插件在Github上，我正在做一些改进(比如只与数据属性一起使用(不需要JS)。我将代码留在下面，但它与Github上的不同。

    我喜欢纯粹的CSS版本，但是在关闭之前有一个延迟是很好的，因为它通常是一种更好的用户体验(例如，不会因为鼠标滑出下拉列表外1px而受到惩罚等)，并且正如评论中所提到的，当您移动到从原始按钮等下拉。

    我创建了一个快速的小插件，我已经在几个网站上使用过，它工作得很好。每个导航项都是独立处理的，因此它们有自己的延迟计时器等。

    JS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this).parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('    delay'),
                    instantlyCloseOthers: $(this).data('    close-others')
                },
                options = $.extend(true, {}, defaults, options, data),
                timeout;

            $this.hover(function() {
                if(options.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('    open');

                window.clearTimeout(timeout);
                $(this).addClass('    open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $this.removeClass('    open');
                }, options.delay);
            });
        });
    };

    delay参数非常简单，当您将鼠标悬停在一个新下拉列表上时，instantlyCloseOthers将立即关闭所有其他打开的下拉列表。

    不是纯粹的CSS，但希望在这个晚些时候能帮助其他人(也就是说，这是一个旧线程)。

    如果你愿意的话，你可以看到我(在关于#concrete5IRC的讨论中)通过这个gist中的不同步骤使它工作的不同过程：https://gist.github.com/3876924

    插件模式方法在支持单个计时器等方面更为简洁。

    更多信息请参见博客文章。

    这对我很有用：

    1
    2
    3
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    相关讨论

    它内置于引导程序3中。只需将此添加到您的CSS中：

    1
    2
    3
    .dropdown:hover .dropdown-menu {
    display: block;
    }

    使用jquery更好：

    1
    2
    3
    4
    5
    6
    7
    jQuery('ul.nav li.dropdown').hover(function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).show();
      jQuery(this).addClass('open');
    }, function() {
      jQuery(this).find('.dropdown-menu').stop(true, true).hide();
      jQuery(this).removeClass('open');
    });
    相关讨论

    您可以使用默认的$().dropdown('toggle')方法切换悬停时的下拉菜单：

    1
    2
    3
    $(".nav .dropdown").hover(function() {
      $(this).find(".dropdown-toggle").dropdown("toggle");
    });

    只是想补充一点，如果您有多个下拉列表(和我一样)，您应该写：

    1
    2
    3
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    它会正常工作的。

    相关讨论

    最好的方法就是用鼠标悬停来触发引导程序的点击事件。这样，它仍然应该对触摸设备友好。

    1
    2
    3
    $('.dropdown').hover(function(){
      $('.dropdown-toggle', this).trigger('click');
    });
    相关讨论

    在我看来，最好的办法是这样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    ;(function($, window, undefined) {
        // Outside the scope of the jQuery plugin to
        // keep track of all dropdowns
        var $allDropdowns = $();

        // If instantlyCloseOthers is true, then it will instantly
        // shut other nav items when a new one is hovered over
        $.fn.dropdownHover = function(options) {

            // The element we really care about
            // is the dropdown-toggle's parent
            $allDropdowns = $allDropdowns.add(this.parent());

            return this.each(function() {
                var $this = $(this),
                    $parent = $this.parent(),
                    defaults = {
                        delay: 500,
                        instantlyCloseOthers: true
                    },
                    data = {
                        delay: $(this).data('    delay'),
                        instantlyCloseOthers: $(this).data('    close-others')
                    },
                    settings = $.extend(true, {}, defaults, options, data),
                    timeout;

                $parent.hover(function(event) {

                    // So a neighbor can'    t open the dropdown
                    if(!$parent.hasClass('open') && !$this.is(event.target)) {
                        return true;
                    }

                    if(settings.instantlyCloseOthers === true)
                        $allDropdowns.removeClass('open');

                    window.clearTimeout(timeout);
                    $parent.addClass('open');
                }, function() {
                    timeout = window.setTimeout(function() {
                        $parent.removeClass('open');
                    }, settings.delay);
                });

                // This helps with button groups!
                $this.hover(function() {
                    if(settings.instantlyCloseOthers === true)
                        $allDropdowns.removeClass('open');

                    window.clearTimeout(timeout);
                    $parent.addClass('open');
                });

                // Handle submenus
                $parent.find('.dropdown-submenu').each(function(){
                    var $this = $(this);
                    var subTimeout;
                    $this.hover(function() {
                        window.clearTimeout(subTimeout);
                        $this.children('.dropdown-menu').show();

                        // Always close submenu siblings instantly
                        $this.siblings().children('.dropdown-menu').hide();
                    }, function() {
                        var $submenu = $this.children('.dropdown-menu');
                        subTimeout = window.setTimeout(function() {
                            $submenu.hide();
                        }, settings.delay);
                    });
                });
            });
        };

        $(document).ready(function() {
            // apply dropdownHover to all elements with the data-hover="dropdown" attribute
            $('[data-hover="dropdown"]').dropdownHover();
        });
    })(jQuery, this);

    样本标记：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <li class="dropdown">
       
            Account <b class="caret">
       
        <ul class="dropdown-menu">
           
    <li>
    My Account
    </li>

            <li class="divider">
    </li>

           
    <li>
    Change Email
    </li>

           
    <li>
    Change Password
    </li>

            <li class="divider">
    </li>

           
    <li>
    Logout
    </li>

       
    </ul>


    </li>
    相关讨论

    我已经按如下方式进行了管理：

    1
    2
    3
    4
    5
    $('ul.nav li.dropdown').hover(function(){
           $(this).children('ul.dropdown-menu').slideDown();
        }, function(){
           $(this).children('ul.dropdown-menu').slideUp();
    });

    我希望这能帮助别人…

    这可能是一个愚蠢的想法，但要删除向下的箭头，可以删除

    1
    <b class="caret">

    但是，这对上指的一点都不起作用…

    还添加了Margin Top:0以重置引导CSS Margin for.Dropdown菜单，这样当用户从下拉菜单缓慢悬停到菜单列表时，菜单列表就不会取消显示。

    1
    2
    3
    4
    5
    6
    7
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

    .nav .dropdown-menu {
        margin-top: 0;
    }
    相关讨论

    我已经为bootstrap 3下拉悬停功能发布了一个合适的插件，在该插件中，您甚至可以定义单击dropdown-toggle元素时发生的情况(单击可以禁用)：

    https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

    为什么我在已经有很多解决方案的情况下做到了？

    我对以前所有现有的解决方案都有问题。简单的css没有在.dropdown上使用.open类，因此当下拉列表可见时，下拉切换元素不会有反馈。

    JS的影响是点击.dropdown-toggle，所以鼠标悬停时会显示下拉菜单，点击打开的下拉菜单时会隐藏下拉菜单，鼠标向外移动会触发下拉菜单再次显示。一些JS解决方案正在破坏iOS的兼容性，一些插件不能在支持触摸事件的现代桌面浏览器上工作。

    这就是为什么我制作了引导程序下拉悬停插件，它只使用标准的引导程序JavaScriptAPI，而不进行任何黑客攻击，从而防止了所有这些问题。甚至aria属性也可以很好地使用这个插件。

    相关讨论

    1
    $('.dropdown').hover(function(e){$(this).addClass('open')})
    相关讨论

    使用此代码打开鼠标悬停(仅桌面)上的子菜单：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('ul.nav li.dropdown').hover(function () {
        if ($(window).width() > 767) {
            $(this).find('.dropdown-menu').show();
        }
    }, function () {
        if ($(window).width() > 767) {
            $(this).find('.dropdown-menu').hide().css('display','');
        }
    });

    如果你想让第一级菜单可以点击，即使在手机上也可以添加：

    1
    2
    3
    4
    5
        $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
            window.location = $(this).attr('href');
        }
    });

    子菜单(下拉菜单)将以鼠标悬停在桌面上，单击/触摸移动设备和平板电脑打开。打开子菜单后，再次单击将打开链接。多亏了if ($(window).width() > 767)，该子菜单将在移动设备上显示全屏宽度。

    相关讨论

    如果下拉列表和插入符号小于平板，则应隐藏它们。

    1
    2
    3
    4
    5
    @media (max-width: 768px) {
        .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
            display: none;
        }
    }
    相关讨论

    这会隐藏起来的

    1
    2
    3
    4
    5
    6
    .navbar .dropdown-menu:before {
       display:none;
    }
    .navbar .dropdown-menu:after {
       display:none;
    }
    相关讨论

    jquery解决方案很好，但它需要处理点击事件(对于移动或平板电脑)，因为鼠标无法正常工作…可以做一些窗口重新调整大小的检测吗？

    安德烈斯伊利奇的回答似乎很有效，但它应该包含在一个媒体查询中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    @media (min-width: 980px) {

        .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;
            border-left: none;
            border-right: 6px solid #fff;
            border-bottom: 6px solid transparent;
            left: 10px;
            top: 11px;
            left: -6px;
        }
    }

    这里是jsFiddle->https://jsFiddle.net/prkonsult/mn31qf0p/1/

    底部的javascript位是真正的魔力所在。

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    <!--http://getbootstrap.com/components/#navbar-->

     
        <nav class="navbar navbar-inverse" role="navigation">
         
            <!-- Brand and toggle get grouped for better mobile display -->
           
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              Brand
           

            <!-- Collect the nav links, forms, and other content for toggling -->
           
              <ul class="nav navbar-nav">
                <li class="active">Link
    </li>

               
    <li>
    Link
    </li>

                <li class="dropdown">
                  Dropdown <b class="caret">
                  <ul class="dropdown-menu">
                   
    <li>
    Action
    </li>

                   
    <li>
    Another action
    </li>

                   
    <li>
    Something else here
    </li>

                    <li class="divider">
    </li>

                   
    <li>
    Separated link
    </li>

                    <li class="divider">
    </li>

                   
    <li>
    One more separated link
    </li>

                 
    </ul>

               
    </li>

             
    </ul>


              <ul class="nav navbar-nav navbar-right">
               
    <li>
    Link
    </li>

                <li class="dropdown">
                  Dropdown <b class="caret">
                  <ul class="dropdown-menu">
                   
    <li>
    Action
    </li>

                   
    <li>
    Another action
    </li>

                   
    <li>
    Something else here
    </li>

                    <li class="divider">
    </li>

                   
    <li>
    Separated link
    </li>

                 
    </ul>

               
    </li>

             
    </ul>

           
            <!-- /.navbar-collapse -->
         
          <!-- /.container-fluid -->
        </nav>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    /* Bootstrap dropdown hover menu */

    body {
      font-family: 'PT Sans', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: #4f5d6e;
      position: relative;
      background: rgb(26, 49, 95);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
    }

    .body-wrap {
      min-height: 700px;
    }

    .body-wrap {
      position: relative;
      z-index: 0;
    }

    .body-wrap: before,
    .body-wrap: after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: -1;
      height: 260px;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
      background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
    }

    .body-wrap:after {
      top: auto;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
    }

    nav {
      margin-top: 60px;
      box-shadow: 5px 4px 5px #000;
    }

    然后，javascript代码的重要部分：

    1
    2
    3
    4
    5
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

    用这个脚本覆盖bootstrap.js。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    jQuery(document).ready(function ($) {
    $('.navbar .dropdown').hover(function() {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function() {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
    });

    $('.dropdown-submenu').hover(function() {
        $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function() {
        var na = $(this)
        na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
    });

    });

    所以你有这个代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    Show menu

    <ul class="dropdown-menu" role="menu">
       
    <li>
    Link 1
    </li>

       
    <li>
    Link 2
    </li>
     
       
    <li>
    Link 3
    </li>
                                                 

    </ul>

    通常它在单击事件上工作，而您希望它在悬停事件上工作。这很简单，只需使用以下javascript/jquery代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    $(document).ready(function () {
        $('.dropdown-toggle').mouseover(function() {
            $('.dropdown-menu').show();
        })

        $('.dropdown-toggle').mouseout(function() {
            t = setTimeout(function() {
                $('.dropdown-menu').hide();
            }, 100);

            $('.dropdown-menu').on('mouseenter', function() {
                $('.dropdown-menu').show();
                clearTimeout(t);
            }).on('mouseleave', function() {
                $('.dropdown-menu').hide();
            })
        })
    })

    这个很好用，下面是解释：我们有一个按钮和一个菜单。当我们悬停按钮时，会显示菜单，当鼠标悬停按钮时，我们会在100毫秒后隐藏菜单。如果您想知道我为什么使用它，是因为您需要时间将光标从按钮拖动到菜单上。当你在菜单上时，时间会被重置，你可以在那里停留你想要的时间。当您退出菜单时，我们会立即隐藏菜单，不会超时。

    我在许多项目中使用过此代码，如果您在使用它时遇到任何问题，请随时问我问题。

    相关讨论

    对于插入符号…我没有看到任何人指定完全阻止插入符号的简单CSS。

    干得好：

    1
    2
    3
    .caret {
        display: none !important;
    }

    为了增强Sudharshan的答案，我将它包装在一个媒体查询中，以防止在XS显示宽度上悬停…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media (min-width:768px)
    {
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;    
        }

        .nav .dropdown-menu {
            margin-top: 0;
        }
    }

    另外，标记中的插入符号不是必需的，只是LI的下拉类。

    版本2的解决方案非常简单，只有CSS。为移动设备和平板电脑保留相同的友好功能。

    1
    2
    3
    4
    5
    @media (min-width: 980px) {
        .dropdown:hover .dropdown-menu {
           display: block;
        }
    }
    相关讨论

    这是我的技巧，在你停止在菜单或切换按钮上悬停之后，在菜单关闭之前添加一点延迟。您通常点击显示导航菜单的