Mega Menu

sachin007
Jan 26, 2026 6
Live Preview

Live Editor

<nav class="navbar">
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    
    <li class="has-megamenu">
      <a href="#">Products ▼</a>
      <div class="megamenu">
        <div class="megamenu-row">
          <div class="column">
            <h3>Electronics</h3>
            <a href="#">Laptops</a>
            <a href="#">Phones</a>
            <a href="#">Cameras</a>
          </div>
          <div class="column">
            <h3>Fashion</h3>
            <a href="#">Clothing</a>
            <a href="#">Shoes</a>
            <a href="#">Watches</a>
          </div>
          <div class="column">
            <h3>Home</h3>
            <a href="#">Furniture</a>
            <a href="#">Decor</a>
            <a href="#">Kitchen</a>
          </div>
        </div>
      </div>
    </li>
    
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
/* Basic Navbar Styling */
.navbar {
  background: #222;
  font-family: Arial, sans-serif;
  position: relative;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li > a {
  display: block;
  padding: 20px 25px;
  color: white;
  text-decoration: none;
}

/* Mega Menu Container - Hidden by default */
.megamenu {
  position: absolute;
  left: 0;
  width: 100%;
  background: #f9f9f9;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  display: none; /* Hide the menu */
  z-index: 100;
}

/* Show Menu on Hover */
.has-megamenu:hover .megamenu {
  display: block;
}

/* Content Layout inside Mega Menu */
.megamenu-row {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.column h3 {
  color: #333;
  border-bottom: 2px solid #ff4d4d;
  padding-bottom: 5px;
}

.column a {
  display: block;
  color: #666;
  text-decoration: none;
  padding: 8px 0;
}

.column a:hover {
  color: #ff4d4d;
}
Categories

Mega Menu

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
