CodePen Embed - Dino drop down

<nav class='main-nav'>
  <ul class='menu menu-top menu-horizontal'>
    <li>
      <a href='#'>Dinosaurs</a>
      <ul class='menu menu-submenu menu-tabbed menu-horizontal-4col'>
        <li>
          <a href='#'>Thyreophorans</a>
          <ul class='menu menu-submenu menu-horizontal menu-horizontal-2col'>
            <li class='item item-p2col'>
              <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Ba%C5%82t%C3%B3w_Park_Jurajski_001.jpg/320px-Ba%C5%82t%C3%B3w_Park_Jurajski_001.jpg'>
              <a href='#'>Stegosaurians</a>
              <ul class='menu menu-submenu menu-vertical'>
                <li><a href='#'>Gigantspinosaurus</a></li>
                <li><a href='#'>Stegosaurus</a></li>
                <li><a href='#'>Hesperosaurus</a></li>
                <li><a href='#'>Paranthodon</a></li>
              </ul>
            </li><!--
            --><li>
              <a href='#'>Ankylosaurs</a>
              <ul class='menu menu-submenu menu-horizontal menu-horizontal-2col'>
                <li>
                  <a href='#' class='s'>Nodosaurids</a>
                  <ul class='menu menu-submenu menu-vertical'>
                    <li><a href='#'>Nodosaurus</a></li>
                    <li><a href='#'>Sauropelta</a></li>
                  </ul>
                </li><!--
                --><li>
                  <a href='#' class='s'>Ankylosaurids</a>
                  <ul class='menu menu-submenu menu-vertical'>
                    <li><a href='#'>Ankylosaurus</a></li>
                    <li><a href='#'>Euoplocephalus</a></li>
                    <li><a href='#'>Pinacosaurus</a></li>
                  </ul>
              </ul>
          </ul>
        </li><!--
        --><li>
          <a href='#'>Cerapods</a>
          <ul class='menu menu-submenu menu-horizontal menu-horizontal-3col-h1'>
            <li class='item item-p2col'>
              <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Triceratops_prorsus_-_IMG_0697.jpg/320px-Triceratops_prorsus_-_IMG_0697.jpg'>
              <a href='#'>Ceratopsians</a>
              <ul class='menu menu-submenu menu-vertical'>
                <li><a href='#'>Psittacosaurus</a></li>
                <li><a href='#'>Triceratops</a></li>
                <li><a href='#'>Centrosaurus</a></li>
                <li><a href='#'>Montanoceratops</a></li>
                <li><a href='#'>Styracosaurus</a></li>
                <li><a href='#'>Protoceratops</a></li>
              </ul>
            </li><!--
            --><li>
              <a href='#'>Ornithopods</a>
              <ul class='menu menu-submenu menu-vertical'>
                <li><a href='#'>Shantungosaurus</a></li>
                <li><a href='#'>Iguanodon</a></li>
                <li><a href='#'>Macrogryphosaurus</a></li>
                <li><a href='#'>Thescelosaurus</a></li>
                <li><a href='#'>Othnielosaurus</a></li>
                <li><a href='#'>Notohypsilophodon</a></li>
                <li><a href='#'>Eucercosaurus</a></li>
              </ul>
            </li><!--
            --><li>
              <a href='#'>Pachycephalosaurs</a>
              <ul class='menu menu-submenu menu-vertical'>
                <li><a href='#'>Stegoceras</a></li>
                <li><a href='#'>Dracorex</a></li>
              </ul>
            </li>
          </ul>
        </li><!--
        --><li>
          <a href='#'>Theropods</a>
          <ul class='menu menu-submenu menu-horizontal menu-horizontal-4col'>
            <li>
              <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Tyrannosaurus_Rex_colored.png/320px-Tyrannosaurus_Rex_colored.png'>
              <a href='#'>Tyrannosaurus rex</a>
            </li><!--
            --><li>
              <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Velociraptor_Wyoming_Dinosaur_Center.jpg/320px-Velociraptor_Wyoming_Dinosaur_Center.jpg'>
              <a href='#'>Velociraptor</a>
            </li><!--
            --><li>
              <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Allosaurus_in_Baltow_20060916_1500.jpg/309px-Allosaurus_in_Baltow_20060916_1500.jpg'>
              <a href='#'>Allosaurus</a>
            </li><!--
            --><li>
              <img src='http://upload.wikimedia.org/wikipedia/commons/f/f9/Archaeopteryx_NT.jpg'>
              <a href='#'>Archaeopteryx</a>
            </li>
          </ul>
        </li><!--
        --><li>
          <a href='#'>Sauropodomorphs</a>
          <ul class='menu menu-submenu'>
            <li class='slimg-wrap'>
              <a href='#' class='sl'>
                <img src='https://i.imgur.com/pHmrkiP.jpg'>
              </a>
              <a href='#' class='sl'>
                <img src='https://i.imgur.com/IKxQ8DU.jpg'>
              </a>
              <a href='#'>Apatosaurus</a>
            </li>
          </ul>
        </li>
      </ul>
  </ul>
</nav>

html {
  height: 100%;
  background: grey;
  background:
    -webkit-radial-gradient(50% 0, transparent, black),
    url(https://i.imgur.com/dj8qZuA.jpg) 50% 0 no-repeat;
  background:
    radial-gradient(ellipse at 50% 0, transparent, black),
    url(https://i.imgur.com/dj8qZuA.jpg) 50% 0 no-repeat;
  background-size: 75em 56em, 100em 75em;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
.menu a {
  display: block;
  padding: 0 .2em;
  color: white;
  font: 600 1em/2 sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .65s;
}
.menu img {
  max-width: 100%; max-height: 100%;
}
.menu .menu-tabbed .menu img ~ .menu {
  margin-left: 50%;
}

.main-nav {
  padding: 0 5%;
  background: #36874f;
  background: #36874f -webkit-radial-gradient(25% 0,  #7bcba5, #36874f 71%);
  background: #36874f radial-gradient(ellipse at 25% 0, #7bcba5, #36874f 71%);
  background-repeat: no-repeat;
  background-size: 75% 100%;
}
.menu-top {
  position: relative;
  margin: 0 auto;
  min-width: 32em; width: auto; max-width: 60em;
}
.menu-top > li { 
  display: inline-block;
}
.menu-top > li > a { position: relative; }
.menu-top > li > a:after {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  opacity: 0;
  font: .75em/1.45 sans-serif;
  text-align: center;
  transition: 1s;
  content: '\25BC';
} 
.menu-top > li:hover > a:after { 
  opacity: 1;
}
.menu-horizontal { height: inherit; }
.menu-horizontal > li {  
  display: inline-block;
  height: inherit;
  vertical-align: top;
}
.menu-horizontal-1col > li { width: 100% }
.menu-horizontal-2col > li, 
.menu-horizontal-3col-h1 > .item-p2col {
  width: 50%; max-width: 50%;
}
.menu-horizontal-3col-h1 > li, 
.menu-horizontal-4col > li {
  width: 25%; max-width: 25%;
}
.menu-horizontal-2col > li, 
.menu-horizontal-3col-h1 > .item-p2col { width: 50% }
.menu-top > li > a {
  padding: .5em 3em;
}
.menu-tabbed {
  overflow: hidden;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 0;
  transition: height 1s linear;
}
li/**/:hover/**/ .menu-tabbed {
  height: 20em;
}
.menu-tabbed > li {
  display: inline-block;
  height: 20em;
}
.menu-tabbed a { font-weight: 500;}
.menu-tabbed > li > a {
  margin: -2.5em 0 0;
  height: 2.15em;
  border-radius: 0 0 .5em .5em;
  box-shadow: 0 .1em .25em black,
    inset 0 .25em .25em -.25em black;
  transform-origin: 50% 0;
  transform: scale(.99);
  background: rgba(63, 171, 125, .7);
  text-align: center;
  text-shadow: 0 -1px black;
  transition: color .75s, background .75s, 
    text-shadow .75s,
    margin 1s linear;
}
li/**/:hover/**/ .menu-tabbed > li > a {
  margin: 17.5em 0 0;
}
.menu-tabbed:hover > li:first-child > a {
  box-shadow: 0 .1em .25em black,
    inset 0 .25em .25em -.25em black;
  background:  rgba(63, 171, 125, .7);
  color: white;
  text-shadow: 0 -1px black;
}
.menu-tabbed > li:first-child > a, 
.menu-tabbed > li:first-child:hover > a, 
.menu-tabbed > li:hover > a {
  box-shadow: 0 .1em .25em dimgrey;
  background: #dadbda;
  color: black;
  text-shadow: 0 -1px white;
}
.menu-tabbed > li > ul {
  overflow: hidden;
  position: absolute;
  bottom: 2.5em; left: 0;
  padding: 2em 0 0;
  opacity: 0;
  width: 100%; height: 17.5em;
  background: rgba(245, 245, 245, 1);
  transition: opacity .75s;
  pointer-events: none;
}
.menu-tabbed > li:first-child > ul, 
.menu-tabbed > li:hover > ul {
  opacity: 1;
  pointer-events: auto;
}
.menu-tabbed ul a {
  color: grey;
}
.menu-tabbed > li > ul > li {
  overflow: hidden;
  height: inherit;
}
.menu-tabbed img { height: 70%; width: auto; }
.menu-tabbed > li > ul > li > a:not(.sl) {
  overflow: hidden;
  color: navy;
  font: .9em/2 sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu-tabbed > li > ul > li > a:hover {
  color: black;
}
.item-p2col img {
  float: left;
  margin: 0 1.25%;
  width: 47.5%; height: auto;
}
.menu-tabbed ul ul .s {
  color: black;
  font-weight: 700;
}
.menu-tabbed ul ul .s:hover { color: #36874f; }
.menu-tabbed ul ul a {
  font: .8em/1.25 sans-serif;
}
.menu-tabbed ul ul a:hover { color: black; }
.menu-tabbed > li:last-child > ul {
  margin: 0;
  padding: 0;
}
.slimg-wrap {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  width: 70%;
}
.menu-tabbed > li:last-child img {
  display: inline-block;
  height: inherit;
  transform: skewX(-30deg);
}
.sl {
  overflow: hidden;
  position: absolute;
  width: 100%; height: 100%;
  transform: skewX(30deg);
  opacity: .7;
}
.sl:hover { opacity: 1; }
.sl:first-child {
  right: 50%;
  text-align: right;
}
.sl:nth-child(2) {
  left: 50%;
  text-align: left;
}
.sl:first-child img { margin-right: -5.3em; }
.sl:nth-child(2) img { margin-left: -6.7em; }

This Pen is owned by Ana Tudor on CodePen.

See more by @thebabydino on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.