Responsive Dropdown on hover built with Bootstrap 5. Example of how to make dropdown expand when you hover over it.
Check out Bootstrap Dropdown on hover Documentation for detailed instructions & even more examples.
Add CSS that makes the dropdown-menu expand when hovering over a dropdown element.
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}-
Download MDB - free UI KIT
-
Choose your favorite customized component and click on the image
-
Copy & paste the code into your MDB project
- Address Form
- Avatar
- Scroll Back To Top button
- Bootstrap Carousel Slider with Thumbnails
- Bullet list
- Chat
- Code
- Comments
- Comparison table
- Credit card form
- Drawer
- Nested Dropdown
- FAQ component / section
- Gallery
- Hamburger Menu
- Invoice
- Jumbotron
- Login form
- Maps
- Media object
- Mega Menu
- Multiselect
- News feed
- Offcanvas
- Order details
- Page transitions
- Payment Forms
- Product Cards
- Profiles
- Quotes
- Registration form
- Expanding Search Bar
- Select with custom Input
- Shopping carts
- Side Navbar
- Sidebar
- Social Media icons & buttons
- Square Buttons
- Survey form
- Testimonial Slider
- Testimonials / Reviews
- Textarea
- Text animations
- Timeline
- To Do List
- Video carousel / gallery
- Video carousel / gallery
- Weather
- Dark mode
- Padding
- Modal Size
- Modal Show, Close, Hide & Toggle
- Modal Backdrop
- Card Deck
- Card Deck
- Table Filter
- Table responsive
- Slider
- Slideshow
- Logo
- Popup
- Max Width
- Hero
- Inline list
- Select Dropdown
- Labels
- Dialog
- Screen Sizes
- Dropdown Button
- Widgets
- Overlay
- Height
- Popover on hover
- Border radius
- Table fixed header
- Side menu
- Vertical navbar
- Flash messages
- Number inputs
- Inline block
- Modal form
- Horizontal list
- Side panel
- Navbar brand
- Select list
- Cookie consent
- Table column width
- Dropdown language selector
- Select dropdown with search
- Icon color
- Fade animation
- Carousel autoplay
- Modal image
- Navbar with icons
- Image grid
- Fullscreen background image
- List with icons
- Social media icons footer
- Notification badge
- Music / Audio player
- Colors code
- Alert auto close
- Pie chart
- File input image
- Calculator
- Table collapse expand rows
- Sticky footer
- Icon size
- Dropdown with notification
- Dropdown checkbox
- Button colors
- Mobile menu
- Text wrap
- Small box
- Table header color
- Tiles
- Range slider with labels
- Margin
- Password reset template
- Text align right
- Scroll div
- Menu with icons
- Slide animation
- Circle badge
- Animated icons
- Textarea scrollbar
- Empty row
- Tabs vertical
- Switch with text
- Break Word
- Table no border
- D-flex classes
- Header with logo
- Icon inside input
- Datepicker default date
- Animations classes on scroll
- Modal hover
- Horizontal accordion
- Product carousel
- Phone number input mask
- Line chart
- Combobox
- Select styling
- Full screen modal
- Dropdown hover
- Order form
- Half page background image
- Modal onload
- Bar chart
- Custom play button
- Double navigation with 2 navbars
- Google maps
- Password validation
- Progress bar with steps
- Active class in navbar
- Navbar height
- Navbar search
- Multiselect modal
- Chart card
- Cards list
- Input group width
- Horizontal form
- Input and button on same line
- Social media icons navbar
- Header with footer
- Gradient navbar
- Doughnut chart
- Checkbox list group
- Select dropdown with icon
- Dropdown on hover
- Checkbox buttons
- Login form with background image
- Vertical carousel