Untitled

li:hover > ul.drop-menu li {
  opacity: 0;
  -webkit-animation-name: menu1;
  -moz-animation-name: menu1;
          animation-name: menu1;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
}

@-webkit-keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="container">
        <nav>
  <ul>
    <li>style 1
      <ul class="drop-menu menu-1">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
        <li>seis</li>
      </ul>
    </li>
    <li>style 2
      <ul class="drop-menu menu-2">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
        <li>seis</li>
      </ul>
    </li>
  </ul>
</nav>
    </div>

</body>
</html>