DropDown Menu Using HTML CSS and JavaScript – Part O1

Hi guys I am back with another fantastic project in this project I created a DorpDown Menu-like e-commerce website Using HTML, CSS & JavaScript.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

DropDown Menu

A dropdown menu is a list of options hidden until the user interacts with it, such as by clicking or hovering over it. The menu options then appear below the trigger element, which is typically a button or a link.

Dropdown menus are a common way to present many options in a compact space. They are often used on websites and web applications to allow users to select from a list of items, such as countries, languages, or file formats.

drop-down menu using html and css

In this menu, I created a multi-dropdown when the user hovers over skills then It will appear a large menu and again user clicks on every menu element like Coding, Design, and Dev Ops which shows the new options.

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created byCoding Pakistan
Languages HTML / CSS / JS
Source CodeAvailable Below
PreviewTake Preview

How to Create a Drop-Down Menu

There are some steps to create this type of Drop-Down using HTML, CSS, and JavaScript that are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
  3. Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. The last step is copying and pasting the given code into your files.

Multi Drop-Down MenuSource Code


<!DOCTYPE html>
<html lang="en">
    <!-- Created by www.codingpakistan.com -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Dropdown 6</title>
      <a class="dropdown-button" href="#" onmouseenter="toggleMenuOpen(true)" onmouseleave="toggleMenuOpen(false)">
          viewBox="0 0 24 24"
            d="M6 9L11.7874 14.7874V14.7874C11.9048 14.9048 12.0952 14.9048 12.2126 14.7874V14.7874L18 9"
      <a href="#"> About </a>
      <a href="#"> Portfolio </a>
    <div onmouseenter="toggleMenuOpen(true)" onmouseleave="toggleMenuOpen(false)" class="menu">
      <div class="menu-buttons">
        <button class="active" onclick="toggleMenuBlock(this, 0)">
        <button onclick="toggleMenuBlock(this, 1)">Design</button>
        <button onclick="toggleMenuBlock(this, 2)">Dev Ops</button>
      <div id="menuContent" class="menu-content">
        <div class="menu-block">
        <div class="menu-block">
          <p>Adobe XD</p>
          <p>After Effects</p>
        <div class="menu-block">
          <p>Bit Bucket</p>
    <script src="script.js"></script>


* {
    box-sizing: border-box;
  body {
    height: 100%;
  body {
    margin: 0;
    background: #f1f0fa;
    overflow-x: hidden;
    font-family: "Euclid Circular A", "Poppins";
  :root {
    --color-primary: #6d63ff;
    --sidebar-width: 140px;
    --menu-height: 140px;
  nav {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #ffffff;
    width: 100%;
    height: 60px;
    box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);
  nav a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    padding: 0 10px;
  nav > img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  .burger {
    width: 16px;
    height: 16px;
  nav > a {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 60px;
    padding: 0 16px 0 0;
  .dropdown > a > img {
    width: 16px;
    height: 16px;
    margin-right: 12px;
  .menu {
    overflow: hidden;
    position: fixed;
    z-index: 1;
    top: 59px;
    left: 0;
    width: 100vh;
    height: var(--menu-height);
    padding: 0 20px 20px 0;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    translate: 0 -10px;
    box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);
    transition: 0.3s;
  body.open .menu {
    opacity: 1;
    visibility: visible;
    translate: 0;
  body.open .dropdown-button,
  nav a:hover {
    color: var(--color-primary);
  body.open .dropdown-button path {
    stroke: var(--color-primary);
  .menu-buttons {
    width: var(--sidebar-width);
  .menu-buttons button {
    margin: 0;
    font-size: 14px;
    width: 100%;
    height: 36px;
    margin: 4px 0 4px 10px;
    padding: 0 0 0 7px;
    background: transparent;
    border-radius: 20px;
    border: 0;
    border-left: 6px solid transparent;
    opacity: 0.5;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: 0.3s;
  .menu-buttons button.active {
    opacity: 1;
    color: var(--color-primary);
  .menu-buttons button.active,
  .menu-buttons button:hover {
    background: #f0efff;
  .menu-content {
    position: absolute;
    top: 0;
    left: var(--sidebar-width);
    height: calc(var(----menu-height) * 3);
    padding-left: 30px;
    transition: 0.6s;
  .menu-content p {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 13px;
    margin: 0;
    color: #222222;
    opacity: 0.5;
  .menu-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 41px;
    align-items: center;
    gap: 0 30px;
    height: var(--menu-height);

JavaScript FILE

const menuContent = document.querySelector("#menuContent");

const menuButtons = document.querySelectorAll(".menu-buttons button");

const menuHeight = getComputedStyle(document.documentElement).getPropertyValue(

const toggleMenuOpen = (value) => {
  document.body.classList.toggle("open", value);

const toggleMenuBlock = (event, index) => {
  menuButtons.forEach((button) => button.classList.remove("active"));
  menuContent.style.translate = `0 calc(0px - ${menuHeight} * ${index})`;

Related Content

  1. Hamburger Menu Design Using HTML and CSS – Complete Code
  2. How to Create Mobile App Icon Menu Using HTML, CSS, and JavaScript
  3. Step Up Your Website’s Design with a Responsive Footer Menu using HTML and CSS

Leave a Comment