任何人都可以使用下面的 JSfiddle 代码告诉如何在悬停菜单上显示菜单项吗？
请勿更改悬停箭头。
.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>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 .caret{
display:none;
}
.dropdown-submenu:hover>a:after{
border-left-color:#555;
}
.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;
}
/* caret style */
.caret {
position: relative;
}
/* dropdown style */
.dropdown.open .caret:before,
.dropdown.open .caret:after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 7px 8px;
border-style: solid;
border-color: transparent;
z-index: 1001;
}
.dropdown.open .caret:before {
bottom: 17px;
right: 15px;
border-bottom-color: #ccc;
}
.dropdown.open .caret:after {
bottom: 18px;
right: 15px;
border-bottom-color: #fff;
}
/* navbar style */
.navbar-nav > li > .dropdown-menu {
left: -9px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-nav > .open > a .caret:before {
bottom: -23px;
}
.navbar-nav > .open > a .caret:after {
bottom: -24px;
}
@media only screen and (max-width: 600px) {
.caret {
position: relative;
}
.dropdown.open .caret:before,
.dropdown.open .caret:after {
display: none;
position: absolute;
}
.dropdown-submenu>a:after{
display:block;
content: none;
}
.dropdown-submenu .caret{
display: block;
float: right;
width: 0;
height: 0;
border-color:transparent;
border-style:solid;
margin-right: 193px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #cccccc;
margin-top: -12px;
}
}
@media only screen and (max-width: 992px) {
.caret {
position: relative;
}
.dropdown.open .caret:before,
.dropdown.open .caret:after {
display: none;
position: absolute;
}
.dropdown-submenu>a:after{
display:block;
content: none;
}
.dropdown-submenu .caret{
display: block;
float: right;
width: 0;
height: 0;
border-color:transparent;
border-style:solid;
margin-right: 193px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #cccccc;
margin-top: -12px;
}
}
@media only screen and (max-width: 1200px) {
.caret {
position: relative;
}
.dropdown.open .caret:before,
.dropdown.open .caret:after {
display: none;
position: absolute;
}
.dropdown-submenu>a:after{
display:block;
content: none;
}
.dropdown-submenu .caret{
display: block;
float: right;
width: 0;
height: 0;
border-color:transparent;
border-style:solid;
margin-right: 10px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #cccccc;
margin-top: -12px;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- used for bootstrap Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background: antiquewhite;">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Active 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 a">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4<b class="caret"></b></a>
<ul class="dropdown-menu b">
<li><a href="#">Dropdown Submenu 4.1</a></li>
<li><a href="#">Dropdown Submenu 4.2</a></li>
<li><a href="#">Dropdown Submenu 4.3</a></li>
<li><a href="#">Dropdown Submenu 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.1</a></li>
<li><a href="#">Dropdown Submenu 5.2</a></li>
<li><a href="#">Dropdown Submenu 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</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="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
在这里，我给出了多级导航栏。我无法在悬停时显示菜单项。