We have to make a project at school and i want to make this dropdown inside a navbar expand once you hover it. I've tried diffrent solutions but so far all I get is a button that requires a click or all the options beneath each other without a dropdown.
<li class="nav-item">
<div class="dropdown" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Category</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Login</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</li>
You can do this using CSS, and Bootstrap.
Here is a working example.
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
.container {
margin-top: 10px;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#opening">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>