CodePen Embed - CSS DropDown Menu


<div class="wrapper">
  <div class="contents">
    <div class="contents__inner">
<!--      <h1>【DEMO】CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ)</h1> -->
      
      <div class="mod__trg"><i></i>AAA</div>
      
      
      <nav>
        <ul class="menu">
          
          <li class="menu__none"><a href="#">Menu none</a></li>


          <li class="menu__multi">
            <a href="#" class="init-bottom">Menu multi level</a>
            <ul class="menu__second-level">
              <li>
                <a href="#" class="init-right">Child Menu</a>
                <ul class="menu__third-level">
                  <li>
                    <a href="#" class="init-right">Grandchild Menu</a>
                    <ul class="menu__fourth-level">
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Grandchild Menu</a></li>
                  <li><a href="#">Grandchild Menu</a></li>
                </ul>
              </li>
              <li>
                <a href="#" class="init-right">Child Menu</a>
                <ul class="menu__third-level">
                  <li><a href="#">Grandchild Menu</a></li>
                  <li>
                    <a href="#" class="init-right">Grandchild Menu</a>
                    <ul class="menu__fourth-level">
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Grandchild Menu</a></li>
                </ul>
              </li>
              <li>
                <a href="#" class="init-right">Child Menu</a>
                <ul class="menu__third-level">
                  <li><a href="#">Grandchild Menu</a></li>
                  <li><a href="#">Grandchild Menu</a></li>
                  <li>
                    <a href="#" class="init-right">Grandchild Menu</a>
                    <ul class="menu__fourth-level">
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                      <li><a href="#">Great-Grandchild Menu</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>


          <li class="menu__mega">
            <a href="#" class="init-bottom">Menu mega</a>
            <ul class="menu__second-level">
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
            </ul>
          </li>


          <li class="menu__single">
            <a href="#" class="init-bottom">Menu single</a>
            <ul class="menu__second-level">
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
              <li><a href="#">Child Menu</a></li>
            </ul>
          </li>


        </ul>
      </nav>
    </div>


    <!--  Hum    -->
<!--    <div id="ham-menu">
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
      </ul>
    </div>
    <div id="menu-background"></div>
 -->

    <br>

    <div class="footer">
      <h3>参照元</h3>
      <p><a href="http://theorthodoxworks.com/demo/201502/demo-drop-down-menu-multi-css.html">DropDown</a></p>
      <p><a href="https://q-az.net/hamburger-menu-only-css/">ハンバーガー</a></p>
    </div>

body {
  color: #000;
  font: 15px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  background-color: #f5f5f5;
  text-align: left;
}

a {
  text-decoration: none;
}


/*** base */

.wrapper {
  width: 100%;
  height: 100vh;
  text-align: center;
  font-size: 13px;
  background: #BED6E6;
}

.contents {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.contents__inner {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 50px 24px;
  color: #fff;
  h1 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
  }
}


/*** menu */


/*-------------------------
カスタム
-------------------------*/

@media only screen and (max-width: 640px) {
  .menu {
    flex-direction: column;
    display: none;
    opacity: 0;
    transition: .5s;
    &.open {
      display: block;
      opacity: 1;
      transition: .5s;
    }
  }
  .mod__trg {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: 14px;
    top: 15px;
    background-color: #fff;
    border-radius: 5px;
    i {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 3px;
      background: #000;
      transition: background 0.5s;
      position: relative;
      left: 5px;
      top: 14px;
      &:before,
      &:after {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 3px;
        background: #000;
        position: absolute;
        transform: rotate(0deg);
        transition: all 0.3s !important;
      }
      &:before {
        transform: translateY(8px);
      }
      &:after {
        transform: translateY(-8px);
      }
    }
    &.is-open {
      i {
        background: #fff;
        &:after {
          transform: translateY(0px) rotate(-45deg);
        }
        &:before {
          transform: translateY(0px) rotate(45deg);
        }
      }
    }
  }
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu {
  display: none;
}

.menu.open {
  display: block;
  animation: show .3s linear 0s;
}

.menu {
  position: relative;
  width: 100%;
  height: 50px;
  max-width: 1000px;
  display: flex;
  margin: 0 auto;
  > li {
    flex: 1 1 auto;
    // float: left;
    // width: 25%;
    height: 50px;
    line-height: 50px;
    background: rgb(29, 33, 19);
    a {
      // display: block;
      color: #fff;
      &:hover {
        color: #999;
      }
    }
  }
}

.menu__none:hover,
.menu__multi:hover,
.menu__mega:hover,
.menu__single:hover {
  background: #072A24;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

.menu__second-level li,
.menu__third-level li {
  border-top: 1px solid #111;
}

.menu__second-level li a:hover {
  background: #111;
}

.menu__third-level li a:hover {
  background: #2a1f1f;
}

.menu__fourth-level li a:hover {
  background: #1d0f0f;
}

.init-bottom:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu {
  &:before {
    content: "";
    display: table;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  *zoom: 1;
  > .menu__single {
    position: relative;
  }
}


/**
 * single menu
 */

.menu__single {
  .menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #072A24;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    visibility: hidden;
    opacity: 0;
  }
  &:hover > .menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
  }
}


/**
 * multi menu
 */

.menu > .menu__multi {
  position: relative;
}

.menu__multi {
  .menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #072A24;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
  }
  &:hover .menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
  }
  .menu__second-level li {
    position: relative;
    &:hover {
      background: #111;
    }
    .menu__third-level {
      position: absolute;
      top: -1px;
      left: 100%;
      width: 100%;
      background: #111;
      -webkit-transition: all .2s ease;
      transition: all .2s ease;
      visibility: hidden;
      opacity: 0;
    }
    &:hover .menu__third-level {
      visibility: visible;
      opacity: 1;
    }
    .menu__third-level li {
      position: relative;
      &:hover {
        background: #2a1f1f;
      }
      .menu__fourth-level {
        position: absolute;
        top: -1px;
        left: 100%;
        width: 100%;
        background: #2a1f1f;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        visibility: hidden;
        opacity: 0;
      }
      &:hover .menu__fourth-level {
        visibility: visible;
        opacity: 1;
      }
    }
  }
}

.init-right:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**
 * mega menu
 */

.menu__mega {
  .menu__second-level {
    position: absolute;
    top: 40px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 2%;
    background: #072A24;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
  }
  &:hover .menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
  }
  .menu__second-level > li {
    float: left;
    width: 32%;
    border: none;
    &:nth-child(3n+2) {
      margin: 0 1%;
    }
  }
}


/* -------------------------
ハンバーガーメニュー部分 -------------------------*/

// #ham-menu {
//  background-color: #fff;
//  /*メニュー背景色*/
//  box-sizing: border-box;
//  height: 100%;
//  padding: 10px 40px;
//  /*メニュー内部上下左右余白*/
//  position: fixed;
//  right: -300px;
//  /*メニュー横幅①と合わせる*/
//  top: 0;
//  transition: transform 0.3s linear 0s;
//  /*0.3s は変化するのにかかる時間*/
//  width: 300px;
//  /*メニュー横幅①*/
//  z-index: 1000;
//  &::before {
//    background-color: #fff;
//    /*ボタン部分背景色*/
//    border-radius: 0 0 0 10px;
//    /*左下角丸*/
//    color: #333;
//    /*アイコン（フォント）色*/
//    content: "≡";
//    /*メニューアイコン*/
//    display: block;
//    font-size: 50px;
//    /*アイコン（フォント）サイズ*/
//    height: 50px;
//    line-height: 50px;
//    /*縦位置中央化*/
//    position: absolute;
//    right: 100%;
//    text-align: center;
//    top: 0;
//    width: 50px;
//  }
// }

/*メニューアイコン部分は疑似要素で*/


/*透過背景部分*/

// #menu-background {
//  background-color: #333;
//  /*黒背景部分背景色*/
//  display: block;
//  height: 100%;
//  opacity: 0;
//  position: fixed;
//  right: 0;
//  top: 0;
//  transition: all 0.3s linear 0s;
//  /*0.3s は変化するのにかかる時間*/
//  width: 100%;
//  z-index: -1;
// }

/*hover 時の処理*/

#ham-menu:hover {
  transform: translate(-300px);
  /*メニュー横幅①と合わせる*/
  + #menu-background {
    opacity: 0.5;
    /*黒背景部分透過度*/
    z-index: 999;
  }
}

.footer {
  color: #999;
  a {
    color: #999;
  }
}

View Compiled

$(document).ready(function() {
  $(".mod__trg").click(function() {
    if ($(".menu").hasClass("open")) {
      $('.menu').removeClass("open");
      $(this).removeClass("is-open");
    } else {
      $('.menu').addClass("open");
      $(this).addClass("is-open");
    }
  });
});

This Pen is owned by Pistol on CodePen.

See more by @pistol on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js