dropdown

by Kim Ara

HTML

<div>
  <ul class="sub_gnb">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>  
</div>

CSS

.sub_gnb {
      -moz-transform: translate(0, 30px);
      -webkit-transform: translate(0, 30px);
      -o-transform: translate(0, 30px);
      transform: translate(0, 30px);
      transform-origin: 50% 0;
      visibility: hidden;
      opacity: 0;
      color: #929292;
      box-shadow: 7px 7px 15px -5px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out
   }
   
   .sub_gnb.hover {
      visibility: visible;
      opacity: 1;
      -moz-transform: translate(0, 0);
      -webkit-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0)
   }