Simple Pure CSS Mega Menu

index.pug

.nav-wrapper
  .nav
    each val in [1, 2, 3, 4, "Good Bye"]
      .dropdown
        a Category
        .megamenu
          p= val
          p Hello World

simple-pure-css-mega-menu.markdown

Simple Pure CSS Mega Menu

Hover over each category to see a unique mega menu for each category tab. No javascript. Uses as few CSS classes / declarations as possible to be succint.

Uses jade (preprocessed HTML) and regular CSS. View the compiled HTML (top right corner) to see what it would like in just HTML.

Intenationally not responsive. Just use something like bootstrap container instead of nav-wrapper. Read more about other responsive examples I made here

https://vincentmtang.com/2018/10/25/make-css-mega-menu/

A Pen by Vincent Tang on CodePen.

License.

style.css

.nav-wrapper {
  width: 600px;
  font-size: 23px;
}
.nav {
  display: flex;
  background-color: lightgray;
  justify-content: space-between;
  position: relative; /* so megamenu spans entire nav*/
}
.dropdown {
  width: 100%;
  border-right: 1px solid black;
}
.dropdown:last-of-type {
  border-right: none;
}
a {
  text-align: center;
  display: block;
}

/* Set megamenu controls */
.megamenu {
  position: absolute; /* relative position on nav*/
  left: 0;
  width: 100%;
  visibility: hidden;
  display: block;
  background-color: lightblue;
  text-align: center;
}
.dropdown:hover .megamenu {
  visibility: visible;
}