About Lesson
Hover Dropdown & Dark Theme
.dropdown-menu-dark→ Makes dropdown dark.show→ Used to manually show a dropdown
Example 1: Hover Dropdown (CSS Method)
HTML
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle" type="button">
Hover Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Option 1</a></li>
</ul>
</div>
Output:
Example 2: Dark-Themed Dropdown
HTML
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dark Theme Dropdown
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Dark Item 1</a></li>
</ul>
</div>
Output:
