« Back to main

Bootstrap dropdown with mega menu

View demo Download

We know about dropdowns and multilevel dropdowns. But some of ecommerce websites has mega submenu. When you hover on any menu item of dropdown menu, another large submenu will appear next to it. This kind of large dropdowns mostly used for e-commerce websites. It is also called e-commerce mega menu.

Steps to create responsive dropdown with large submenu
  • Create navbar with dropdown menu.
  • Add another dropdown-menu after dropdown-item element (inside li of first level dropdown-menu)
  • Add your own class for second level dropdown-menu, Let's add classmegasubmenu.
  • Now we need to make second level dropdown-menu a bit larger and also set its position to left:100%; top:0; and also sizing min-height: 100%; min-width:500px;
  • Show it on mouse hover with css
    .dropdown-menu > li:hover .megasubmenu{ display: block; }
  • Final step is to make it adaptive for mobile device. Just few javascript code
Here are basic code snippets

« Back to all examples

Creating e-commerce project?