cssのみでドロワーメニューの実装

 <header>
        <nav>
            <ul class="nav__list">
                <li class="nav__item"><a href="" class="nav__link">店舗情報</a>
                    <div class="nav__box">
                        <ul class="nav__box--inner">
                            <li class="nav__box-title">
                                <a href="" class="nav__link">店舗案内</a>
                                <ul class="nav__box-list nav__box-list--3col">
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗１</a></li>
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗１</a></li>
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗１</a></li>
                                </ul>
                            </li>
                            <li class="nav__box-title">
                                <a href="" class="nav__link">店舗一覧を見る</a>
                             </li>
                            <li class="nav__box-title">
                                <a href="" class="nav__link">展示会情報</a>
                                <ul class="nav__box-list">
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div></li>
                    <li class="nav__item"><a href="" class="nav__link">about</a></li>
                <li class="nav__item"><a href="" class="nav__link">クリスマス</a></li>
                <li class="nav__item"><a href="" class="nav__link">お正月</a></li>
                <li class="nav__item"><a href="" class="nav__link">その他</a></li>
                <li class="nav__item"><a href="" class="nav__link">コラム</a></li>
                <li class="nav__item"><a href="" class="nav__link">会社概要</a></li>
                <li class="nav__item"><a href="" class="nav__link">検索</a></li>
            </ul>
        </nav>
</header>

.nav__list {
  max-width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 50px 0;
}

.nav__item:hover .nav__box--inner {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.nav__link {
  color: #333;
}

.nav__box {
  position: relative;
}

.nav__box--inner {
  position: absolute;
  top: 25px;
  left: -45px;
  width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 20px;
  opacity: 0;
  -webkit-box-shadow: 0px 0px 5px;
          box-shadow: 0px 0px 5px;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.nav__box-title {
  width: calc(100% / 2);
}

.nav__box-list {
  margin: 20px 0;
  border-top: 2px solid #000;
  width: 80%;
}

.nav__box-list--3col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.nav__box-list--3col .nav__box-item {
  padding-right: 10px;
}

.nav__box-item {
  margin-top: 10px;
}

.nav__box-item--1col {
  margin-bottom: 20px;
}

transition: all .5s;　→ドロワーメニューの動きを設定
transform: scaleY(0);　→　要素を拡大、または、縮小表示する際に使用
transform-origin: center top;　→要素の変形transformにおける原点を設定
------------------------------
hoverしたら、センターのトップからY軸の方向へ0.5sで拡大してメニューを開いている様に見せる