How to make a dropdown menu in Blazor

I am trying to make a simple dropdown menu in my Blazor app. It is declared in my Header.razor as shown below:

<div class="header-sign"><div class="dropdown" id="toggleDropdown"><button class="button-md" type="button"><i data-feather="user"></i><span>Personal cab</span></button><ul class="dropdown-list"><li class="dropdown-item"><a class="dropdown-link" href=""><p class="text-md">Cabinet</p></a></li><li class="dropdown-item"><a class="dropdown-link" href=""><p class="text-md">Sign out</p></a></li></ul></div></div>

The dropdown can be triggered via JS script like this:

$("#toggleDropdown").on("mouseenter", () => {$(this).find(".dropdown-list").addClass("is-active");});

I have my header declared in MainLayout.razor like shown below:

@inherits LayoutComponentBase<Header></Header><main class="main">    @Body</main><Footer></Footer>

And this approach doesn't work.

Everything changes if I replace the above-mentioned Header.razor with razor page Header.cshtml with exactly the same markup and render it in _Layout.cshtml in such a way:

@await Html.PartialAsync("Header")

Looks like the above markup can only work in *.cshtml files but cannot in *.razor and I don't quiet understand the reason. Why does it behave this way?