How can I add a soft transition effect to my Blazor server app Navigation menu? (When clicking on main menue item, submenues are listed)

I have a navigation manue group like below. If I click to the main menue item "CNC", the submenues get visible and listed under the "CNC" menue item.(Like accordion menue). I want to add a soft transition effect to my menue group so that the submenues are visible not immediatly, but with a soft transition effect.

I had used for my text input fields -webkit-transition: 0.5s in the css and it worked fine. But if I tried the same in the nav-link class it didin't work.

How can I adapt that to my navigation menue? Or is there another way to do that?

<NavLink class="nav-link" @onclick="()=>expandSubNav2 = !expandSubNav2">
<span class="oi oi-home" aria-hidden="true"></span> CNC
</NavLink>

@if (expandSubNav2)
{
<NavLink class="" href="CNC_Status">
    <span class="sub_menu">Status</span>
</NavLink>
<br>
<NavLink class="" href="CNC_Files_840D">
    <span class="sub_menu">CNC Files</span>
</NavLink>
<br>
<NavLink class="" href="CNC_MD_840D">
    <span class="sub_menu">CNC MD</span>
</NavLink>
<br>
<NavLink class="" href="NC_Var">
    <span class="sub_menu">NC Variables</span>
</NavLink>
}

I had used similar transition effect in my text input field with this code:

input[type=text] {    
-webkit-transition: 0.5s;
transition: 0.5s;
}