How to Make CSS Dropdown Menu?

Here I’ll show you how to make a Hoverable and Clickable dropdown menu using HTML CSS and JS.

1. CSS Hoverable Dropdown menu

To make a hoverable dropdown menu we will not use JavaScript, we need only CSS. Let’s see –

<ul class="dropdown">
    <li><a hrC

body {
    padding: 50px;
    font-family: "Open Sans";
}
a {
    all: unset;
    cursor: pointer;
}

.dropdown {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.dropdown a {
    display: block;
    padding: 20px;
    text-transform: uppercase;
}
.dropdown li ul,
.dropdown a {
    color: #ccc;
    background-color: #1c1c1c;
}

.dropdown li ul a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 10px;
}

.dropdown li a:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fcfcfc;
}

.dropdown > li {
    position: relative;
}

.dropdown > li > ul {
    padding: 0;
    position: absolute;
    list-style: none;
    width: max-content;
    max-width: 200px;
    /* Hiding the submenu */
    visibility: hidden;
    translate: 0 24px;
    opacity: 0;
    transition: 0.3s;
}

/* Showing the submenu on hover */
.dropdown > li:hover ul {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
}

---

2. Clickable Dropdown menu using CSS + JS

To make a clickable dropdown menu we need to use JavaScript along with the CSS.

Now we convert the above hoverable dropdown menu into a clickable dropdown menu –

<ul class="dropdown">
    <li><a href="">Menu</a>
        <ul>
            <li><a href="">Item 1 is red</a></li>
            <li><a href="">Item 2 is blue</a></li>
            <li><a href="">Item 3 is green</a></li>
            <li><a href="">Item 4 is yellow</a></li>
        </ul>
    </li>
</ul>

Follow the commented instructions –

/* DELETE this line of code from the hoverable css */
/* Showing the submenu on hover */
.dropdown > li:hover ul {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
}

/* ADD this line of code into the DELETED PLACE */
.show-submenu{
    visibility: visible !important;
    opacity: 1 !important;
    translate: 0 0 !important;
}

After that, the CSS code will look like the following –

body {
    padding: 50px;
    font-family: "Open Sans";
}
a {
    all: unset;
    cursor: pointer;
}

.dropdown {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.dropdown a {
    display: block;
    padding: 20px;
    text-transform: uppercase;
}
.dropdown li ul,
.dropdown a {
    color: #ccc;
    background-color: #1c1c1c;
}

.dropdown li ul a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 10px;
}

.dropdown li a:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fcfcfc;
}

.dropdown > li {
    position: relative;
}

.dropdown > li > ul {
    padding: 0;
    position: absolute;
    list-style: none;
    width: max-content;
    max-width: 200px;
    /* Hiding the submenu */
    visibility: hidden;
    translate: 0 24px;
    opacity: 0;
    transition: 0.3s;
}

.show-submenu {
    visibility: visible !important;
    opacity: 1 !important;
    translate: 0 0 !important;
}

Here is the JS code that adds the clickable function to the dropdown menu. Place this JS code at the end of the body tag or you can put this code into an external JS file.

const dropBtn = document.querySelectorAll('.dropdown > li > a');

function showSubMenu(e,el){
    e.preventDefault();
    if(el && el.nextElementSibling.nodeName === 'UL'){
        el.nextElementSibling.classList.toggle('show-submenu')
    }
}

dropBtn.forEach((el) => {
    el.onclick = (e) => showSubMenu(e,el);
});

window.onclick = function(e){
    if (event.target.matches('.dropdown > li > a')) return;
    const dropdowns = document.querySelectorAll('.dropdown > li > ul');
    dropdowns.forEach((el) => {
        if(el.classList.contains('show-submenu')){
            el.classList.remove('show-submenu');
        }
    });
}