Cara Membuat Mega Menu HTML CSS

Mega menu adalah sebuah menu yang berisi banyak sub menu, biasanya ketika kita hover kita hanya menampilkan sebuah sub menu dari nama kategori tersebut, tetapi karena banyak, maka dinamakan mega menu seperti itu, untuk membuatnya cukup simple disini saya menggunakan HTML CSS dimana ini saya dapatkan dari w3school. Oke jangan kemana-mana simak terus ya.

Seperti biasa untuk membuat sebuah menu dropdown kita hidden terlebih dahulu sub menu kategori dropdownnya, dan ketika hover kita arahkan ke menu yang ada kategorinya, dia akan muncul, yang kita berikan display: block, seperti itu,, oke langsung saja.

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">About US</a>
  <div class="dropdown">
    <button class="dropbtn">Product 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Kategori Product</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Kerudung</h3>
          <a href="#">Kerudung syari</a>
          <a href="#">Kerudung Langsungan</a>
          <a href="#">Kerudung Biasa</a>
        </div>
        <div class="column">
          <h3>Atasan</h3>
          <a href="#">Kemeja</a>
          <a href="#">Kaos</a>
          <a href="#">jaket</a>
        </div>
        <div class="column">
          <h3>Bawahan</h3>
          <a href="#">Celana Kantor</a>
          <a href="#">Celana Jeans</a>
          <a href="#">Celana Sarung</a>
        </div>
      </div>
    </div>
  </div> 
</div>

Disini tidak menggunakan ul li, ya, dan disini lah CSSnya, yang cukup banyak.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #95a5a6;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: #34495e;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

silahkan teman-teman copy ya, dan sekarang kita lihat hasilnya

bagaimana disini sengaja saya tampilkan pada tampilan mobile ya, bagaimana cantik bukan, oke saya rasa cukup sampai disini saja belajar kita tentang cara membuat mega menu HTML CSS, sampai jumpa pada artikel berikutnya terimakasih.