我想有我的引导菜单自动下拉悬停，而不是必须点击菜单标题。我还想去掉菜单标题旁边的小箭头。
当前回答
为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
然而，如果你正在使用Bootstrap的响应特性，你将不希望这个功能出现在折叠的导航栏上(在较小的屏幕上)。为了避免这种情况，可以将上面的代码包装在媒体查询中:
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
要隐藏箭头(插入符号)，这取决于你是使用Twitter Bootstrap版本2或更低版本3，以不同的方式完成:
引导3
要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 &更低
要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。
感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停
其他回答
为了让菜单在悬停时自动下落，这可以使用基本的CSS实现。您需要计算出隐藏菜单选项的选择器，然后将其设置为在适当的li标记悬停时显示为块。以twitter引导页面为例，选择器如下所示:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
然而，如果你正在使用Bootstrap的响应特性，你将不希望这个功能出现在折叠的导航栏上(在较小的屏幕上)。为了避免这种情况，可以将上面的代码包装在媒体查询中:
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
要隐藏箭头(插入符号)，这取决于你是使用Twitter Bootstrap版本2或更低版本3，以不同的方式完成:
引导3
要在版本3中删除插入符号，你只需要从.dropdown-toggle锚定元素中删除HTML <b class="插入符号"></b>:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 &更低
要删除版本2中的插入符号，您需要对CSS有更多的了解，我建议更详细地了解:after伪元素是如何工作的。为了让你开始理解，在推特引导例子中瞄准并删除箭头，你将使用以下CSS选择器和代码:
a.menu:after, .dropdown-toggle:after {
content: none;
}
如果你深入研究这些方法，而不是仅仅使用我给你的答案，这会对你有利。
感谢@CocaAkat指出，我们错过了“>”子组合子，以防止子菜单显示在父悬停
这可能是一个愚蠢的想法，但要删除指向向下的箭头，您可以删除
<b class="caret"></b>
不过，这对向上的那个没有任何作用……
我希望这能有所帮助。查看链接https://jsfiddle.net/awb7gfb1/
<nav>
<div id="menubar" class=" collapse navbar-collapse row">
<ul id="dropdownNavbar" class="nav navbar-nav">
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
Time Card
<span class="caret"></span></button>
<div class="dropdown-content">
<a id="showTimeCard" href="#">My Time Card</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
Project
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
HR Links
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-screenshot"></span>
Leave Tracker
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-briefcase"></span>
Accounts
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-headphones"></span>
Service Desk
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-file"></span>
Reports
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
<a href="#">Sub Menu 4</a>
<a href="#">Sub Menu 5</a>
</div>
</li>
<li class="dropdown">
<button type="button" class="btn btn-primary dropbtn">
<span class="glyphicon glyphicon-cog"></span>
Settings
<span class="caret"></span></button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</div>
</nav>
还有CSS
.dropdown {
float: left;
padding-right: 1px;
}
.dropbtn{
border: 0px;
height: 30px;
border-radius: 0px 10px;
}
li button, .dropbtn {
display: inline-block;
color: white;
text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
background-color: #12A5F4;
}
.dropbtn.active {
background: #12A5F4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e8f3f4;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.navbar-header{
overflow: visible;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 10px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8dee2
}
.dropdown:hover .dropdown-content {
display: block;
}
#menubar{
padding-top: 5px;
overflow: visible;
z-index: 10;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
#dropdownNavbar{
margin: 0px;
}
.navbar-toggle{
background-color: #3382d5;
}
.navbar-toggle span{
background-color: white;
}
<!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>
jQuery的解决方案是好的，但它将需要处理点击事件(移动或平板电脑)悬停将无法正常工作…也许可以做一些窗口重新大小检测?
安德烈斯·伊里奇的回答似乎很有效，但它应该被包装在一个媒体问题中:
@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;
}
}
