hover dropdown .jpg
来源:https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-hover-navbar/
如何实现像可点击的下拉导航一样相应地向右下拉的菜单。由于它的悬停版本实际上是下拉到左侧，我希望它位于右侧。 我对任何其他解决方案都很好，但我需要使用最新的 Bootstrap 和 jquery。谢谢。
/*!
* Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
* Copyright 2017.
* Licensed under the GPL license
*/
$( document ).ready( function () {
$( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
var $el = $( this );
var $parent = $( this ).offsetParent( ".dropdown-menu" );
if ( !$( this ).next().hasClass( 'show' ) ) {
$( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
}
var $subMenu = $( this ).next( ".dropdown-menu" );
$subMenu.toggleClass( 'show' );
$( this ).parent( "li" ).toggleClass( 'show' );
$( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
$( '.dropdown-menu .show' ).removeClass( "show" );
} );
if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
$el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
}
return false;
} );
} );/*=-====Bootstrapthemes.co btco-hover-menu=====*/
.navbar-light .navbar-nav .nav-link {
color: rgb(64, 64, 64);
}
.btco-hover-menu a , .navbar > li > a {
text-transform: capitalize;
padding: 10px 15px;
}
.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus ,
.navbar>.show>a, .navbar>.show>a:focus, .navbar>.show>a:hover{
color: #000;
background: transparent;
outline: 0;
}
/*submenu style start from here*/
.dropdown-menu {
padding: 0px 0;
margin: 0 0 0;
border: 0px solid transition !important;
border: 0px solid rgba(0,0,0,.15);
border-radius: 0px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/*first level*/
.btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;}
.btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}
/*second level*/
.btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;}
/*third level*/
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#f5f5f5;}
.btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#f5f5f5}
.btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#f5f5f5}
/*Drop-down menu work on hover*/
.btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}
@media only screen and (max-width: 991px) {
.btco-hover-menu .show > .dropdown-toggle::after{
transform: rotate(-90deg);
}
}
@media only screen and (min-width: 991px) {
.btco-hover-menu .collapse ul li{position:relative;}
.btco-hover-menu .collapse ul li:hover> ul{display:block}
.btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
/*******/
.btco-hover-menu .collapse ul ul li{position:relative}
.btco-hover-menu .collapse ul ul li:hover> ul{display:block}
.btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
/*******/
.btco-hover-menu .collapse ul ul ul li{position:relative}
.btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
.btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}
}<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Navbar with hover multi dropdown</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">
<!--Demo purpose css-->
<style>
body {
padding-top: 50px;
}
.navbar {
margin: 40px 0;
}
.jumbotron{background-color: #1f1f1f;color: #fff;}
</style>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div> <!-- /container -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/bootstrap-4-hover-navbar.js"></script>
</body></html>最佳答案
您只需删除 CSS 中的 1 行...
.btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}
演示:https://www.codeply.com/go/EuirMfjkYZ
此外，提供的多级菜单过于复杂。您可以使用 simple CSS 创建相同的效果:https://www.codeply.com/go/ji5ijk6yJ4(无 jQuery)，如我的 answer here 中所述。
关于html - Bootstrap 4 Multiple Level Nav Bar，如何让它在第3层向右下降？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50403530/