如何使Twitter Bootstrap菜单下拉hover而不是点击
我想让我的Bootstrap菜单在hover时自动下拉，而不必点击菜单标题。 我也想失去菜单标题旁边的小箭头。
我创build了一个基于最新（v2.0.2）Bootstrap框架的hover下拉菜单，它支持多个子菜单，并且认为我会将其发布给未来的用户：
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; } <link href="ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></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><a href="#">Link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="#" href="#">Menu</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div> </div> <hr> <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#">Menu</a> </li> <li class="dropdown"> <a href="#">Menu</a> </li> </ul>
为了让菜单自动hover，这可以使用基本的CSS来实现。 您需要将select器设置为隐藏菜单选项，然后将其设置为在合适的li标签hover时显示为块。 以twitter bootstrap页面为例，select器如下所示：
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
但是，如果您正在使用Bootstrap的响应function，则不会在折叠的导航栏上（小屏幕上）使用此function。 为避免这种情况，请将上面的代码包装在媒体查询中：
@media (min-width: 979px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } }
要隐藏箭头（插入符号），可以通过不同的方式完成，具体取决于您使用的是Twitter Bootstrap版本2及更低版本还是3：
Bootstrap 3
要删除版本3中的插入符号，只需从.dropdown-toggle锚点元素中删除HTML <b class="caret"></b> ：
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <b class="caret"></b> <-- remove this line </a>
引导2和更低
要在版本2中删除插入符号，您需要对CSS有更深入的了解，并build议查看:after伪元素如何更详细地工作。 为了让你开始理解，定位和移除twitter引导示例中的箭头，可以使用下面的CSSselect器和代码：
a.menu:after, .dropdown-toggle:after { content: none; }
如果你进一步研究这些工作，而不是仅仅使用我给你的答案，这将对你有利。
感谢@CocaAkat指出我们错过了“>”子组合器，以防止子菜单显示在父项目上
除了“我的头痛”（很好）的答案之外：
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }
有两个悬而未决的问题：
- 点击下拉链接将打开下拉菜单。 它会保持打开状态，除非用户在其他地方点击，或者重新开始，创build一个尴尬的用户界面。
- 下拉链接和下拉菜单之间有1px的空白。 这会导致下拉菜单在下拉菜单和下拉菜单之间缓慢移动时隐藏。
（1）的解决scheme是从导航链接中删除“class”和“data-toggle”元素
<a href="#"> Dropdown <b class="caret"></b> </a>
这也使您能够创build一个链接到您的父页面 – 这是默认实现不可能的。 您可以将“＃”replace为您要发送给用户的任何页面。
（2）的解决scheme是删除.dropdown菜单select器上的margin-top
.navbar .dropdown-menu { margin-top: 0px; }
我用了一些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(); });
这里有很多非常好的解决scheme。 但我想我会继续把我的这个作为另一种select。 这只是一个简单的jQuery代码片段，如果引导程序支持将鼠标hover在下拉菜单上，而不是点击鼠标，就可以实现它。 我只用版本3testing过，所以我不知道它是否可以与版本2一起工作。将它作为代码片段保存在你的编辑器中，并在一个关键帧处理。
<script> $(function() { $(".dropdown").hover( function(){ $(this).addClass('open') }, function(){ $(this).removeClass('open') } ); }); </script>
基本上，这只是说当你把鼠标hover在下拉类上时，它会将打开的类添加到它。 然后，它只是工作。 当你停止在父类li上使用下拉类或子类ul / li时，它将删除公开的类。 很明显，这只是众多解决scheme中的一个，您可以添加它以使其仅适用于.dropdown的特定实例。 或者向父母或子女添加转换。
只需三行代码即可自定义您的CSS样式
.dropdown:hover .dropdown-menu { display: block; }
[更新]插件在GitHub上 ，我正在做一些改进（比如只使用数据属性（不需要JS），我把代码留在下面，但是和GitHub不一样。
我喜欢纯粹的CSS版本，但是在它closures之前有一个延迟是很好的，因为它通常是一个更好的用户体验（也就是说，不会因为在下拉菜单之外出现1px的鼠标滑落而受到惩罚），并且在评论中提到，那么您必须处理1px的保证金，或者有时当您移动到原始button的下拉列表中时，nav会意外closures。
我创build了一个快速的小插件，我已经使用了几个网站，它很好地工作。 每个导航项目都是独立处理的，所以他们有自己的延迟计时器等等。
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会立即closures所有其他的鼠标hover在新的下拉菜单上。
不是纯粹的CSS，但希望能在这么晚的时候帮助别人（也就是说这是一个旧线程）。
如果你愿意的话，你可以看到我经历的不同的过程（在#concrete5 IRC的讨论中），通过这个要点的不同步骤来实现它： https ： //gist.github.com/3876924
插件模式的方法是更清洁，以支持个人计时器等
查看博客文章了解更多。
如果你有一个像这样的dropdown类的元素（例如）：
<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>
然后，您可以使用下面的jQuery代码片段，将鼠标hover在下拉菜单上，而不必点击标题：
<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>
这里是一个演示
这个答案依赖@迈克尔答案 ，我做了一些改变，并添加了一些添加到下拉菜单正常工作
这对我工作：
.dropdown:hover .dropdown-menu { display: block; }
您可以使用默认的$().dropdown('toggle')方法来切换hover时的下拉菜单：
$(".nav .dropdown").hover(function() { $(this).find(".dropdown-toggle").dropdown("toggle"); });
用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'); });
只是想补充一点，如果你有多个下拉菜单（就像我一样），你应该写：
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; }
它会正常工作。
这样做的最好方法就是使用hover触发Bootstrap的单击事件。 这样，它仍然应该保持触摸设备友好。
$('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click'); });
在我看来，最好的办法是这样的：
;(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>
我已经pipe理它如下：
$('ul.nav li.dropdown').hover(function(){ $(this).children('ul.dropdown-menu').slideDown(); }, function(){ $(this).children('ul.dropdown-menu').slideUp(); });
我希望这可以帮助别人
还增加了margin-top：0来重置.dropdown菜单的bootstrap css margin，所以当用户从下拉菜单缓慢地移动到菜单列表时，菜单列表不会被消除。
ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .nav .dropdown-menu { margin-top: 0; }
$('.dropdown').hover(function(e){$(this).addClass('open')})
这可能是一个愚蠢的想法，但只要删除箭头指向下，你可以删除
<b class="caret"></b>
这对于向上的指向没有任何帮助，但是…
这将隐藏起来
.navbar .dropdown-menu:before { display:none; } .navbar .dropdown-menu:after { display:none; }
如果他们比平板电脑小，这应该隐藏下拉和他们的插入。
@media (max-width: 768px) { .navbar ul.dropdown-menu, .navbar li.dropdown b.caret { display: none; } }
我已经发布了Bootstrap 3下拉hoverfunction的正确插件 ，您甚至可以在单击dropdown-toggle元素（可以禁用点击）时定义发生的情况：
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
为什么我做到了，什么时候有很多解决scheme？
我以前所有的解决scheme都存在问题。 简单的CSS不会在.open使用.open类，因此当下拉菜单可见时，下拉切换元素将不会有任何反馈。
js的人正在干扰点击.dropdown-toggle ，所以下拉菜单显示在hover，然后点击打开的下拉菜单时隐藏它，移出鼠标将触发下拉列表再次显示。 一些JS解决scheme正在制定iOS的兼容性，一些插件不支持触摸事件的现代桌面浏览器。
这就是为什么我做了Bootstrap Dropdown Hover 插件 ，通过使用标准的Bootstrap JavaScript API来防止所有这些问题，没有任何破解 。 即使是咏叹调属性也可以正常使用这个插件。
使用此代码打开mousehover上的子菜单（仅限桌面）：
$('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'); } });
子菜单（下拉菜单）将在桌面上用鼠标hover打开，在手机和平板电脑上点击/触摸。 一旦子菜单打开，第二次点击将让您打开链接。 由于if ($(window).width() > 767) ，子菜单将在移动设备上占据全屏宽度。
jQuery的解决scheme是好的，但它将需要处理点击事件（移动或平板电脑），因为hover将无法正常工作…可能可能做一些窗口重新大小检测？
Andres Ilich的答案似乎运作良好，但它应该包装在一个媒体查询中：
@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; } }
用这个脚本覆盖bootstrap.js。
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') }) }); });
在停止菜单或切换button上的hover之后，我的技巧会在菜单closures之前添加一些延迟。 您通常会单击以显示导航菜单的<button>是#nav_dropdown 。
$(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); });
为了增强Sudharshan的回答 ，我把这个包装在一个媒体查询中，以防止在XS显示宽度上hover…
@media (min-width:768px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .nav .dropdown-menu { margin-top: 0; } }
标记中的脱字符也不是必需的，只是li的下拉类。
这适用于WordPress Bootstrap：
.navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before { content: none; }
所以你有这个代码：
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a> <ul class="dropdown-menu" role="menu"> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> </ul>
通常它在单击事件上工作，并且您希望它在hover事件上工作。 这很简单，只需使用这个JavaScript / jQuery代码：
$(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(); }) }) })
这工作得很好，这里是解释：我们有一个button和一个菜单。 当我们将鼠标hover在button上时，我们显示菜单，当鼠标hover时，我们会在100 ms后隐藏菜单。 如果你想知道为什么我使用它，是因为你需要时间从菜单上的button拖动光标。 当你在菜单上，时间被重置，你可以留在那里尽可能多的时间。 当您退出菜单时，我们会立即隐藏菜单，而不会超时。
我在很多项目中使用过这个代码，如果遇到任何问题，请随时提问。
对于脱口而谈…我还没有看到任何指定简单的CSS，完全阻止脱字符。
干得好：
.caret { display: none !important; }
这里是JSFiddle – > https://jsfiddle.net/PRkonsult/mn31qf0p/1/
底部的JavaScript位是真正的魔术。
HTML
<!--http://getbootstrap.com/components/#navbar--> <div class="body-wrap"> <div class="container"> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <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> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </div> </div>
CSS
/* 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; }
Then the important bit of JavaScript code:
$('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); });
