Cacher is the code snippet organizer for pro developers

<nav id="nav">
          <ul class="header_nav_list flex_box flex_between">
            <li><a href="#">HOME</a></li>
            <li>
              <a href="#">BUSINESS</a>
              <ul class="subs">
                <li><a href="#">Web制作</a></li>
                <li><a href="#">Webマーケティング</a></li>
                <li><a href="#">印刷事業</a></li>
              </ul>
            </li>
            <li>
              <a href="#">ABOUT US</a>
              <ul class="subs">
                <li><a href="#">会社概要</a></li>
                <li><a href="#">経営理念</a></li>
              </ul>
            </li>
            <li>
              <a href="#">PROCLAMATION</a>
              <ul class="subs">
                <li><a href="#">sdgsへの取り組み</a></li>
                <li><a href="#">キュリティアクション宣言</a></li>
                <li><a href="#">コンプライアンスポリシー </a></li>
              </ul>
            </li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">WEB事業部サイト</a></li>
          </ul>
        </nav>

/* グローバルナビゲーションプルダウンメニュー */
#nav ul > li {
  position: relative;
}

#nav .subs {
  text-align-last: left;
  width: auto;
  white-space: nowrap;
  display: none;
  position: absolute;
  left: 0;
  z-index: 1;
  padding: 30px 0 0 0;
}

#nav li:hover > * {
  display: block;
}

#nav li:hover {
  position: relative;
}

#nav ul .subs li {
  color: #fff;
  background: #da0025;
}

#nav ul .subs li a {
  display: block;
  padding: 0 20px 5px 20px;
}

#nav ul .subs li:first-child a {
  padding-top: 20px;
}

#nav ul .subs li:last-child a {
  padding-bottom: 20px;
}

#nav ul .subs li a:hover {
  opacity: 0.7;
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}