w3collective/dropdown-mega-menu.html

## dropdown-mega-menu.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dropdown mega menu with pure CSS</title>
    <style>
      .menu {
        display: flex;
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .menu li {
        list-style: none;
      }
      .menu li a {
        padding: 1em;
        display: block;
        color: black;
        text-decoration: none;
      }
      .menu li a:hover {
        color: #336699;
      }
      .mega-menu {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        width: 100%;
        background: #eee;
        opacity: 0;
        visibility: hidden;
      }
      .menu li:hover > .mega-menu {
        opacity: 1;
        overflow: visible;
        visibility: visible;
      }

      .mega-menu .col {
        padding: 1em;
      }
      .mega-menu .col ul {
        margin: 0;
        padding: 0;
      }
      .mega-menu .col li {
      margin-bottom: 0.75em;
      }
      .mega-menu .col h4 {
        text-transform: uppercase;
        margin: 0 0 1em 0;
      }
      .mega-menu .col a {
        padding: 0;
      }
      .mega-menu .col img {
        display: block;
      }
      .mega-menu .col p {
        margin-bottom: 0;
      }
      .mega-menu .col strong {
        text-transform: uppercase;
      }
    </style>
  </head>
    <nav class="nav">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop</a>
          <div class="mega-menu">
            <div class="col">
              <ul>
                <li><a href="#"><h4>Sale</h4></a></li>
                <li><a href="#"><h4>Popular</h4></a></li>
                <li><a href="#"><h4>Top Brands</h4></a></li>
                <li><a href="#">Westelm</a></li>
                <li><a href="#">Linwood Oak</a></li>
                <li><a href="#">Uptun Palace</a></li>
                <li><a href="#">Noel Jones</a></li>
                <li><a href="#">5th Avenue</a></li>
              </ul>
            </div>
            <div class="col">
              <ul>
                <li><a href="#"><h4>Indoor</h4></a></li>
                <li><a href="#">Sofa</a></li>
                <li><a href="#">Bed Frames</a></li>
                <li><a href="#">TV &amp; Entertainment</a></li>
                <li><a href="#">Dining Tables</a></li>
                <li><a href="#">Desks</a></li>
                <li><a href="#">Storage</a></li>
                <li><a href="#">Cabinets</a></li>
              </ul>
            </div>
            <div class="col">
              <ul>
                <li><a href="#"><h4>Outdoor</h4></a></li>
                <li><a href="#">Benches</a></li>
                <li><a href="#">Tables &amp; Chairs</a></li>
                <li><a href="#">Ornaments</a></li>
                <li><a href="#">Plant &amp; Garden</a></li>
                <li><a href="#">Sheds</a></li>
                <li><a href="#">Ponds</a></li>
              </ul>
            </div>
            <div class="col">
              <a href="#">
                <img src="https://loremflickr.com/cache/resized/65535_50850469708_86a9184210_320_240_nofilter.jpg" alt="" />
                <p><strong>Featured Product</strong></p>
              </a>
            </div>
          </div>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>