ilhooq/bootstrap4-mega-menu.html

## bootstrap4-mega-menu.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 4 mega menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <style type="text/css">
      .megamenu .dropdown-menu {
        border-top: none;
      }

      .megamenu .dropdown-menu > ul li {
        list-style-type: none;
        position: relative;
      }

      .megamenu .dropdown-menu p {
        font-size: 0.85rem;
      }

      @media (min-width: 992px) {

        .megamenu .dropdown-menu {
          min-width: 700px;
        }

        .megamenu .dropdown-menu > ul.list-group {
          margin: 0 -1rem;
        }

        .megamenu .dropdown-menu > ul.list-group li {
          margin: 0 1rem;
          width: 150px;
        }

        .megamenu .dropdown-menu p {
          margin-bottom: 0;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Company</a>
        <button class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#mainmenu"
                aria-controls="mainmenu"
                aria-expanded="false"
                aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="mainmenu">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown megamenu">
              <a class="nav-link dropdown-toggle"
                 href=""
                 id="dropdown01"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="false">Item a</a>
              <div class="dropdown-menu p-3 bg-dark text-light" aria-labelledby="dropdown01">
                <ul class="list-group d-lg-flex flex-lg-row">
                  <li>
                    <img src="https://source.unsplash.com/250x150/?sig=4" class="d-none d-lg-block img-fluid" alt="..." >
                    <a href="#" class="nav-link stretched-link d-block mt-2">Sub-item a</a>
                    <p class="d-none d-lg-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum lectus neque</p>
                  </li>
                  <li>
                    <img src="https://source.unsplash.com/250x150/?sig=4" class="d-none d-lg-block img-fluid" alt="..." >
                    <a href="#" class="nav-link stretched-link d-block mt-2">Sub-item b</a>
                    <p class="d-none d-lg-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum lectus neque</p>
                  </li>
                  <li>
                    <img src="https://source.unsplash.com/250x150/?sig=4" class="d-none d-lg-block img-fluid" alt="..." >
                    <a href="#" class="nav-link stretched-link d-block mt-2">Sub-item c</a>
                    <p class="d-none d-lg-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum lectus neque</p>
                  </li>
                  <li>
                    <img src="https://source.unsplash.com/250x150/?sig=4" class="d-none d-lg-block img-fluid" alt="..." >
                    <a href="#" class="nav-link stretched-link d-block mt-2">Sub-item d</a>
                    <p class="d-none d-lg-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum lectus neque</p>
                  </li>
                </ul>
                <ul class="nav justify-content-center mt-3">
                  <li class="nav-link">
                    <a href="#" class="nav-link d-block mt-2">Sub-item e</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" >Item b</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" >Item c</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script>
      $(function() {
        $('.dropdown').hover(function() {
          $('.dropdown-menu', this).fadeIn('fast')
        },
        function() {
          $('.dropdown-menu', this).fadeOut('fast')
        });
      });
    </script>
  </body>
</html>