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 <nav> and a list

<ul>

with one or more

<li>

. Each item

<li>

will have a link

<a>

<nav class="mega-menu">
	<ul class="mega-menu-main">
		<!-- Début d'un onglet -->
		<li class="lvl-0">
			<a href="#">Lien 1</a>
		</li>
		<!-- Fin d'un onglet -->
	</ul>
</nav>

Let's break down the HTML tag by tag and see the minimum CSS to add.

We start with the menu container, the tag

<nav>

with a class

mega-menu

Inside, the

 <ul>

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 relative attribute; we will see the usefulness in the next part.

ul {
	margin: 0;
	padding: 0;
}
.mega-menu-main {
	display: flex;
	position: relative;
}

This list will contain elements

<li>

, 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

<li class="lvl-0">

These elements contain type links

<a>

, 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.

.mega-menu a {
	display: block;
	color: white;
	text-decoration: none;
}

Second Step: Build the Content of the Tabs

This step is simple but technical.

In the elements

<li class="lvl-0">

, we can add the second level next to the link. It is composed of a

<ul class="mega-menu-tab">

, representing the tab's content.

Inside it, we will have columns represented by

<li class="lvl-1">

This is where it gets a bit technical. The content of the tabs, named by the class

mega-menu-tab

, should be under the main bar but outside the tag flow.

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

position: relative

, if you choose the

<li>

parent, you will have unpleasant surprises: the tab and its content will be deformed each time you open it.

For the content of the tab to make the menu width without causing a bug, it is the main element

.mega-menu-main

that will contain the

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

<ul>

and

<li>

. 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.