Css 如何使Twitter引导菜单下拉到鼠标悬停而不是单击

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

要使菜单自动悬停，可以使用基本CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为当相应的

li

标记悬停在上方时显示为块。以twitter引导页面为例，选择器如下所示：

ul.nav li.下拉菜单：悬停>ul.dropdown-menu{
显示：块；
}

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

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

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

---

要隐藏箭头（插入符号），根据您使用的是Twitter引导版本2和更低版本还是版本3，可以采用不同的方式：

引导程序3

要删除版本3中的插入符号，只需从

下拉切换
锚元素中删除HTML


下拉列表
除了“我的头很痛”（这很好）的回答之外：

ul.nav li.下拉菜单：悬停ul.dropdown-menu{
显示：块；
}

有两个悬而未决的问题：

单击下拉链接将打开下拉菜单。它将保持打开状态，除非用户点击其他地方，或者将鼠标悬停在它上面，从而创建一个笨拙的用户界面
下拉链接和下拉菜单之间有1px的边距。如果在下拉菜单和下拉菜单之间缓慢移动，则会导致下拉菜单隐藏
（1）的解决方案是从导航链路中删除“类”和“数据切换”元素

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

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

<b class="caret"></b>



这对指向上的一个没有任何作用，但是…
如果下拉列表和它们的插入符号小于平板电脑，则应该隐藏它们

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

这将隐藏上面的那些

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

我基于最新（v2.0.2）的引导框架创建了一个纯悬停下拉菜单，该框架支持多个子菜单，我想我会将其发布给未来的用户：


正文{
填充顶部：60px；
填充底部：40px；
}
.侧边栏导航{
填充：9px0；
}
.下拉菜单.子菜单{
左：100%；
位置：绝对位置；
排名：0；
可见性：隐藏；
页边顶部：-1px；
}
.下拉菜单li:悬停.子菜单{
能见度：可见；
}
.下拉菜单：悬停.下拉菜单{
显示：块；
}
.导航选项卡.下拉菜单，
.导航药丸.下拉菜单，
.navbar.下拉菜单{
边际上限：0；
}
.navbar.子菜单：之前{
边框底部：7px实心透明；
左边界：无；
右边框：7px实心rgba（0,0,0,0.2）；
边框顶部：7px实心透明；
左：-7px；
顶部：10px；
}
.navbar.子菜单：之后{
边框顶部：6px实心透明；
左边界：无；
右边框：6px实心#fff；
边框底部：6px实心透明；
左：10px；
顶部：11px；
左-6px；
}














导航标头







导航标头






















导航标头














我使用了一些jQuery：

// 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();
});

使用jQuery更好：

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');
});

[Update]插件已打开，我正在进行一些改进（例如仅与数据属性一起使用（无需JS）。我将代码留在下面，但它与GitHub上的不同

我喜欢纯CSS版本，但在它关闭之前有一个延迟是很好的，因为它通常是一个更好的用户体验（即，不会因为鼠标滑倒而受到惩罚，滑倒在下拉列表外1像素，等等），如评论中所述，当您从原始按钮移动到下拉菜单时，您必须处理1倍的保证金，或者有时nav意外关闭，等等

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

JS

// 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，但希望能在这么晚的时候帮助其他人（即
;(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);

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

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

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') })
});

}); 

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

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

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

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

<script>
    $('.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();
        }
    );
</script>

@media (min-width:768px)
{
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }

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

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

$('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','');
    }
});

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

$('.dropdown').hover(function(e){$(this).addClass('open')})

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}

<script>
        $(function() {
            $('.dropdown-hover').hover(
                function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
                function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
            );
        });
    </script>

<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>


$('.dropdown').on('mouseover',function(){
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
    $(this).find('.dropdown-menu').hide();
});

let dropdownTimer;
$('.dropdown').on('mouseover', () => {
    clearTimeout(dropdownTimer)
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
    dropdownTimer = setTimeout(() => {
        $(this).find('.dropdown-menu').hide();
    }, 100)
});