我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
只是想补充一下，如果你有多个下拉列表(就像我一样)，你应该这样写:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
它会正常工作的。
其他回答
只是想补充一下，如果你有多个下拉列表(就像我一样)，你应该这样写:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
它会正常工作的。
使用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');
});
还添加了margin-top:0来重置.dropdown-menu的引导css边距，这样当用户缓慢地从下拉菜单悬停到菜单列表时，菜单列表不会消失。
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
<!DOCTYPE html> <html> <head> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>
你有这样的代码:
<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>
通常它在单击事件上工作，而您希望它在悬停事件上工作。这是非常简单的，只需使用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();
})
})
})
这工作得很好，这里是解释:我们有一个按钮，和一个菜单。当我们悬停按钮时，我们会显示菜单，当我们将鼠标移出按钮时，我们会在100毫秒后隐藏菜单。如果你想知道我为什么使用它，是因为你需要时间从菜单上的按钮拖动光标。当你在菜单上时，时间会被重置，你可以在那里停留多长时间都行。当您退出菜单时，我们将立即隐藏菜单，没有任何超时。
我已经在许多项目中使用了这段代码，如果您在使用它时遇到任何问题，请随时向我提问。
