How to Make a Responsive Mega Menu in HTML CSS

In this tutorial, we will learn how to create a mega-menu in HTML/CSS; it's also called a "dropdown menu". Be careful; unlike a drop-down menu, whose tabs contain only one column of links, each mega-menu tab can contain a lot of data, including several columns of links, texts, images, etc. This tutorial assumes you've mastered the fundamentals of HTML and the basics of CSS, including pseudo-selectors. Our menu will consist of three levels: The list of tabs The columns in the tabs The links are in the columns of the tabs. The names of the CSS classes used in this course are made from scratch. You can use others. HTML tags are to be respected if you want a clean semantic architecture. First Step: Building the Tabs First, we will work based on our menu: the tab bar. We are going to build level 1. In HTML terms, all you need is a semantic tag and a list with one or more . Each item will have a link . Lien 1 Let's break down the HTML tag by tag and see the minimum CSS to add. We start with the menu container, the tag with a class . mega-menu Inside, the main list, the one that will contain the tabs. That's why it wears a class . mega-menu-main From now on, we can remove all base effects from a list. Then, we will use a little flex to align the tabs side by side. Remember to indicate a attribute; we will see the usefulness in the next part. relative } .mega-menu-main { position: relative; } ul { margin : 0 ; padding: 0 ; display : flex; This list will contain elements , and not just any: those of the first level. That's why we're going to add the class to them . lvl-0 Of course, you can add as many tabs as you want by duplicating the tags . These elements contain type links , which will be the tabs' titles. To secure the layout of the rest of the project, we will modify the CSS of all the links of the mega-menu. color: white; text-decoration: none; } .mega-menu a { display : block; Second Step: Build the Content of the Tabs This step is simple but technical. In the elements , we can add the second level next to the link. It is composed of a , representing the tab's content. Inside it, we will have columns represented by . This is where it gets a bit technical. The content of the tabs, named by the class , should be under the main bar but outside the tag flow. mega-menu-tab Otherwise, your site content will drop down whenever you open a tab, which is visually awful. We will therefore position them with . position: absolute As for the container with , if you choose the parent, you will have unpleasant surprises: the tab and its content will be deformed each time you open it. position: relative For the content of the tab to make the menu width without causing a bug, it is the main element that will contain the . .mega-menu-main position: relative Finally, to display the tab on hover, it will suffice to play with the pseudo-selector . :hover In the example, the third level, i.e., the link in the columns, is also represented by a and . At this point, you can do as you wish with the layout that interests you; no limit exists except the screen size! Step Three: Go Responsive Making the menu responsive is pretty straightforward. You need to use media queries to display and restructure the menu to be suitable for mobile tablets. To open the submenus, the best practice is to use JavaScript. We will see this in another tutorial. Our Tip for Creating a Responsive Mega Menu You now know how to make a responsive mega-menu in basic HTML/CSS. Making it more ergonomic and adding nice opening effects with JavaScript is possible.