我在几个站点上使用 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;}
我尝试将过渡延迟添加到子菜单 css，但没有任何影响。
最佳答案
您可以尝试使用这个非官方的 Bootstrap 扩展 - bootstrap-hover-dropdown
它可以延迟 mouseout 事件。
您可以像往常一样通过 data 属性指定它，也可以通过 javascript 调用它:
$('.dropdown-toggle').dropdownHover(options);
它给你两个额外的选择:
delay - 这是当鼠标不再位于下拉菜单或激活它的按钮/导航项上时关闭下拉菜单之前等待的时间。
和一个 bool 值来控制其他打开的菜单:
instantlyCloseOthers - 一个 bool 值，如果为真，将立即关闭与您激活新导航时使用的选择器匹配的所有其他下拉菜单。
演示页面: http://cameronspear.com/demos/bootstrap-hover-dropdown/
注意:它与 Bootstrap 3 不兼容 - 但既然您声称您仍在使用 2.3.2，它应该能满足您的需要。
关于css - 如何在 Bootstrap 下拉菜单上给用户更多时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22075830/