我正在几个网站上使用bootstrap下拉菜单（有问题的网站上的2.3.2，但v3有相同的问题）。我发现菜单效果很好，除非我有更长的子菜单。问题是鼠标悬停范围似乎太精确，鼠标输出没有“超时”。除非他们点击另一个菜单区域，否则有没有办法将之前的子菜单保持到X个时间段？
<!-- Begin Main Menu -->
<div class="ewMenu">
<div class="navbar">
<div class="navbar-inner">
<ul id="ewHorizMenu" class="nav">
<li class="dropdown active"><a href="reports_4regions_all_karenrpt.php">Main LDAP Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu disabled"><a href="reports_4regions_all_karenrpt.php">Sales Academy Audience</a>
<ul class="dropdown-menu">
<li><a href="reports_sa_amrpt.php">AM users</a></li>
<li><a href="reports_sa_csrpt.php">CS users</a></li>
<li><a href="reports_sa_gbdrpt.php">GBD users</a></li>
<li><a href="reports_4regions_all_ggo_karenrpt.php">GGO users</a></li>
<li><a href="reports_sa_nbrpt.php">NB users</a></li>
<li><a href="reports_sa_ssrpt.php">SS users</a></li>
<li><a href="reports_sa_tamrpt.php">TAM users</a></li>
</ul>
</li>
<li><a href="reports_allaccredit_finalrpt.php">Accredit User List</a></li>
<li><a href="ldap_karenrpt.php">Good LDAP Table </a></li>
<li class="dropdown-submenu"><a href="http://salesacademy.thomsonreuters.com/reports/">Employee Trees</a>
<ul class="dropdown-menu">
<li><a href="reports/">Create-A-Tree</a></li>
</ul>
</li>
<li><a href="ldap_fullrpt.php">Entire LDAP Feed</a></li>
<li class="dropdown-submenu"><a href="#">Helper Tables</a>
<ul class="dropdown-menu">
<li><a href="reports_regionnamesrpt.php">Region Names</a></li>
<li><a href="reports_regionsrpt.php">Country to Region</a></li>
<li><a href="userlastdaterpt.php">SMART Current Report Date</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="smart_allusers_karenrpt.php">SMART Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_allusers_karenrpt.php">SMART Users</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_allfs_karenrpt.php">SMART FS Users</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_lastlogin_fs_tablerpt.php">Login Stats - FS</a>
<ul class="dropdown-menu">
<li><a href="smart_lastlogin_fs_last30rpt.php">Last 30 days</a></li>
<li><a href="smart_lastlogin_fs_30to60rpt.php">Last 30-60 days</a></li>
<li><a href="smart_lastlogin_fs_60to90rpt.php">Last 60-90 days</a></li>
<li><a href="smart_lastlogin_fs_90plusrpt.php">90 days plus</a></li>
<li><a href="smart_lastlogin_fs_neverrpt.php">Never</a></li>
<li><a href="smart_lastlogin_fs_tablerpt.php">Login Table</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_fs_user_byregrpt.php">By Region</a>
<ul class="dropdown-menu">
<li><a href="smart_lastlogin_act_regrpt.php">Last 30 days</a></li>
<li><a href="smart_lastlogin_30to60_regrpt.php">Last 30-60 days</a></li>
<li><a href="smart_lastlogin_60to90_regrpt.php">Last 60-90 days</a></li>
<li><a href="smart_lastlogin_90plus_byregrpt.php">90 days plus</a></li>
<li><a href="smart_lastlogin_never_regrpt.php">Never</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_allusers_karenrpt.php">All SMART Users</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_lastlogin_tablerpt.php">Login Stats - All</a>
<ul class="dropdown-menu">
<li><a href="smart_lastlogin_last30rpt.php">Last 30 days</a></li>
<li><a href="smart_lastlogin_30to60rpt.php">Last 30-60 days</a></li>
<li><a href="smart_lastlogin_60to90rpt.php">Last 60-90 days</a></li>
<li><a href="smart_lastlogin_90plusrpt.php">90 days plus</a></li>
<li><a href="smart_lastlogin_neverrpt.php">Never</a></li>
<li><a href="smart_lastlogin_tablerpt.php">Login Table</a></li>
</ul>
</li>
<li><a href="smart_users_byregionrpt.php">All Users - By Region</a></li>
<li><a href="smart_users_byjobrpt.php">All Users - By Job Role</a></li>
<li><a href="smart_users_byburpt.php">All Users - By BU</a></li>
<li><a href="smart_nonfs_karenrpt.php">Non-FS Users</a></li>
<li><a href="smart_ggo_usersrpt.php">GGO Users</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_curmonth_downs_allkarenrpt.php">Cur Month Downloads</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_curmonth_downs_allkaren_nopubrpt.php">All Downs - No Publisher</a>
<ul class="dropdown-menu">
<li><a href="smart_downs_byregiontablerpt.php">By Region</a></li>
<li><a href="smart_downs_bytitlerpt.php">By Doc Title</a></li>
<li><a href="smart_downs_byjobrpt.php">By Job Role</a></li>
<li><a href="smart_downs_byburpt.php">By BU</a></li>
<li><a href="smart_downs_byrangerpt.php">By Range</a></li>
<li><a href="smart_downs_bypubrpt.php">By Publisher</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_curmonth_portals_allkarenrpt.php">SMART Portals</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_curmonth_portals_allkaren_nopubrpt.php">Poral Stats - No Publishers</a>
<ul class="dropdown-menu">
<li><a href="smart_portals_hitsbyregrpt.php">By Region</a></li>
<li><a href="smart_portals_byburpt.php">By BU</a></li>
<li><a href="smart_portals_byjobrpt.php">By JobRole</a></li>
<li><a href="smart_portals_byhitsrpt.php">By Hits</a></li>
<li><a href="smart_portals_viewtablerpt.php">View Table</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_curmonth_search_allkarenrpt.php">SMART Search</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_curmonth_search_allkaren_nopubrpt.php">Search Stats - No Publishers</a>
<ul class="dropdown-menu">
<li><a href="smart_searches_byqueryrpt.php">By Query</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="smart_itemsrpt.php">SMART Items</a>
<ul class="dropdown-menu">
<li><a href="Docs_by_Publishersmry.php">Docs by Publisher</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Action List <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_ex_dupsvsldaprpt.php">SMART</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="smart_items_archivemerpt.php">SMART Items to Archive</a>
<ul class="dropdown-menu">
<li><a href="Low_Usage_Docssmry.php">By Owner</a></li>
</ul>
</li>
<li><a href="smart_ex_deletemerpt.php">SMART Items to Delete</a></li>
<li class="dropdown-submenu"><a href="#">Users</a>
<ul class="dropdown-menu">
<li><a href="smart_ex_trust_no_smartrpt.php">Trust no SMART</a></li>
<li><a href="smart_ex_lostemployeesrpt.php">Lost Employees</a></li>
<li><a href="smart_ex_no_trustrpt.php">SMART no Trust</a></li>
<li><a href="smart_ex_accreditnosmartrpt.php">Accredit no SMART</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">LDAP/Workday</a>
<ul class="dropdown-menu">
<li><a href="reports_ex_nocountryrpt.php">New Country</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- End Main Menu -->
这是一个基本的例子，使用bootstrap 2.3.2 css - 我可以升级到新的bootstrap但是有同样的问题。下拉菜单并没有真正改变。
.dropup,.dropdown{position:relative;}
.dropdown-toggle{*margin-bottom:-3px;}
.dropdown-toggle:active,.open .dropdown-toggle{outline:0;}
.caret{display:inline-block;width:0;height:0;vertical-align:top;border-top:4px solid #000000;border-right:4px solid transparent;border-left:4px solid transparent;content:"";}
.dropdown .caret{margin-top:8px;margin-left:2px;}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#ffffff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.dropdown-menu.pull-right{right:0;left:auto;}
.dropdown-menu .divider{*width:100%;height:1px;margin:7px 1px;*margin:-5px 0 5px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:16px;color:#333333;white-space:nowrap;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{text-decoration:none;color:#ffffff;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999999;}
.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);cursor:default;}
.open{*z-index:1000;}.open>.dropdown-menu{display:block;}
.dropdown-backdrop{position:fixed;left:0;right:0;bottom:0;top:0;z-index:990;}
.pull-right>.dropdown-menu{right:0;left:auto;}
.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px solid #000000;content:"";}
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:1px;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropup .dropdown-submenu>.dropdown-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-2px;-webkit-border-radius:5px 5px 5px 0;-moz-border-radius:5px 5px 5px 0;border-radius:5px 5px 5px 0;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.dropdown .dropdown-menu .nav-header{padding-left:20px;padding-right:20px;}
我尝试将转换延迟添加到子菜单中，没有任何影响。
答案 0 :(得分：1)
您可以尝试使用此非官方引导扩展程序 - bootstrap-hover-dropdown
它可以延迟鼠标移除事件。
您可以通过data属性正常指定，也可以通过javascript调用
$('.dropdown-toggle').dropdownHover(options);
它为您提供了两个额外选项：
delay - 这是在鼠标不再位于下拉列表或激活它的按钮/导航项目时关闭下拉列表之前等待的时间。
和一个布尔值来控制其他打开的菜单：
instantlyCloseOthers - 一个布尔值，当为true时，将立即关闭激活新导航时使用的选择器匹配的所有其他下拉列表。
演示页面： http://cameronspear.com/demos/bootstrap-hover-dropdown/
注意：它与Bootstrap 3不兼容 - 但由于您声称仍然使用2.3.2，它应该符合您的需要。