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>

<li>

<li>

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

mega-menu

Inside, the

 <ul>

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>

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>

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

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

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

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

<li>

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

.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

<ul>

<li>

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.