Bunun sebebi ".sub-menu" classında "display: none;" kullanmanızdan.
Bu şekilde bir kullanım sergilediğinizde ve hover olduğunda "display: block; veya display: flex;" verdiğinizde, transition özelliğinin işlevi olmamakta.

Bu sorunun önüne geçebilmek için "visibility: hidden;" kullanmanız gerekmektedir, aynı zamanda "opacity: 0;" verip fade-in/fade-out olacak şekilde effect uygulayabilirsiniz dropdown açılışında ve kapanışında.
Sizin için kodunuzu düzenledim, aşağıdaki kodu kullanabilirsiniz.

.sub-menu {
  background-color: #fff;
  left: 0;
  padding: 10px;
  position: absolute;
  top: 25px;
  transition: all .35s;
  width: 250px;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
}

.navigation__menu-list:hover .sub-menu {
  visibility: visible;
  opacity: 1;
}