Amacım menü yapımında nereyi block, nereyi flex, inline... yapacağımı kavramak, denemeler yapmak. Burada nav ul li ul bölümüne transition vermek. Açılır menü bölümüne bir türlü geçiş süresi veremiyorum. Bu konuda yardımcı olursanız çok sevinirim.

İkinci bir konu ise bu CSS kodumu eleştirir misiniz? Gereksiz uzun yazdığım yerleri şunları ben olsam bir arada yazardım, şu kodu şurada yazarsan hata alma ihtimalin düşer dediğiniz yerler varsa çok sevinirim.

Herkese iyi çalışmalar, iyi geceler.

HTML Kodu:

• Ana Sayfa
  
• Hizmetler
  
  • Ses, Kayıt, Aranje
    
  • Mix, Mastering
    
  • Ses Tasarım
    
  
  
  
  
• Referanslar
  
• İletişim
  

[CSS] @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
list-style: none;
text-decoration: none;
color: #0f1123;
font-family: 'Open Sans', sans-serif;
letter-spacing: 1px;
font-size: 16px;
}
nav {
width: auto;
height: 50px;
padding-top: 1px;
background: rgba(25, 211, 218, .5);
border-bottom: 1px solid #719fb0;
}
nav > ul {
display: flex;
justify-content: flex-end;
padding-top: 10px;

}
nav ul li {
margin-right: 4%;
text-align: center;
width: 150px;
}
nav ul li a:hover {
background: rgba(100, 206, 203, 0.6);
}
.btn {
background: rgba(100, 206, 203, 0.6);
}
nav ul li a {
display: block;
border-bottom: 1px solid #719fb0;
font-weight:900;
padding: 5px;
}
div {
display: inline-block;
background: rgba(25, 211, 218, .4);
}
div ul li a{
margin-top: 15px;
font-weight: 500;
font-size: 1.02rem;
}
nav > ul > li > div > ul > li {
display: none;
}
nav ul li:hover li{
display: block;
}
[/CSS]