Wordpress tema yaziyorum. navbar menu dropdown css transition calismiyor

Merhaba Beyler,

https://pyroautotransport.com/

yukaridaki sitede Transport Options sekmesine gelince mouse ile, dropdown olusturdum ancak dropdown icindeki linkleri secemeden kayboluyor.

css'de transition: all 2s ease-out, tarzi seyler kullandim.

:hover icinde'de ayni seyi yazdim ama olmadi. sizce neden oluyor?

aslinda css transition kullandim navbar linklerinin uzerine gelince sari oluyor. burada calisiyor ama dropdown da calismadi.

Transition ekledim mi dropdown kutucugu uzerine gelince mouse ile kaybolmaz diye tahmin ediyorum

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;
}

Cok tesekkurler dostum. Bunu gecici olarak css ile halletmek istedim.
ancak aklimda su asagidaki verecegim site gibi yapmayi dusunuyorum ilerde. Bunlar javascript kutuphanesi olan Gsap kullaniyorlar.
https://tangent.co/