Bootstrap dropdown sub menu missing
Bootstrap 5 (update 2021)
Add some JavaScript to prevent the submenu from closing when the parent dropdown is open. This can be done be toggle display:block
...
let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
dd.addEventListener('click', function (e) {
var el = this.nextElementSibling
el.style.display = el.style.display==='block'?'none':'block'
})
})
Bootstrap 5 Multi-level Dropdown - click
Bootstrap 5 Multi-level Dropdown - hover
Or, you can use this CSS only method for Navbar dropdowns...
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
Bootstrap 5 Navbar Dropdown Hover Submenus (CSS only)
Bootstrap 4 (update 2018)
The dropdown-submenu
has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..
"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342
But, with a little extra CSS you can get the same functionality.
navbar submenu on hover:
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
}
Navbar submenu dropdown hover
Navbar submenu dropdown hover (right aligned)
Navbar submenu dropdown click (right aligned)
Navbar dropdown hover (no submenu)
Bootstrap 3
Here is an example that uses 3.0 RC 1: http://bootply.com/71520
Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684
CSS
.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;
}
.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;
}
Sample Markup
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
P.S. - Example in navbar that adjusts left position: http://bootply.com/92442
bootstrap dropdown 3.3.7 submenu does not expand
i did some changes see it
$(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); });});
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><style>.dropdown-submenu { position: relative;}
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px;}</style></head><body> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Service A</a></li> <li><a href="#">Service B</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Service C <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Service C1</a></li> <li><a href="#">Service C2</a></li> <li><a href="#">Service C3</a></li> <li><a href="#">Service C4</a></li> <li><a href="#">Service C5</a></li> </ul> </li> </ul> </li> </ul></div>
</body></html>
Bootstrap dropdown menu items missing style
You need to add a container div with class "dropdown"
, here's the example from bootstrap website:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
As you can see there is a dropdown
class on the wrapper div that you're missing.
Cheers
Dropdown menu does not open with bootstrap
The Dropdown for Bootstrap needs a Script-Dependency. For Bootstrap-5 the JS-Bundle is:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- NAV BAR BOOTSRAP 5-->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">Andres Pachano</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:5000/about-me">About Me</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="true">
More options
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">GitHub</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<!--<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>-->
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Related Topics
How to Use /Deep/ or ≫≫≫ or ::V-Deep in Vue.Js
Difference Between @Import and Link in Css
How to Make 3-Corner-Rounded Triangle in Css
Css Only Pie Chart - How to Add Spacing/Padding Between Slices
How to Hide Collapsible Bootstrap Navbar on Click
Bootstrap 4 Masonry Layout Utilizing Flexbox Grid
Background-Image in Keyframe Does Not Display in Firefox or Internet Explorer
Opacity CSS Not Working in Ie8
How to Apply Specific CSS Rules to Chrome Only
Use Css3 Transitions With Gradient Backgrounds
Font Awesome 5, Why Is CSS Content Not Showing
Css Media Queries: Max-Width or Max-Height
Overflow-X:Hidden Doesn't Prevent Content from Overflowing in Mobile Browsers