Hi, can anyone help me fix / improve this code, please?

When you open the menu and go over the child buttons it flickers cause of the @onmouseout but I need that so the menu will close.

Another problem is when you open multiple dropdown menus in he navbar, they stay open and overlap each other.

It's a vertical navbar and I wanted the dropdown menu to open on the right side but "dropright" or "dropend" classes don't work so I added a margin to push it to the right which looks like a weak patch, so if you know a better way it would be much appreciated.

Here is the code:

This goes in a razor component named DropdownButton.razor:

<div class="nav-item px-3 dropdown">
	<NavLink class="nav-link text-black" data-toggle="dropdown" type="button" @onclick="e => this.show=!this.show" aria-haspopup="true" aria-expanded="false">

		@Title

	</NavLink>
	<div class="dropdown-menu @(show ? "show":"")" @onmouseout="e => this.show=!this.show" 
			style="margin-left: 300px; margin-top: -30px">

		@ChildContent

	</div>
</div>


@code {

	[Parameter]
	public string? Title { get; set; }

	[Parameter]
	public RenderFragment? ChildContent { get; set; }

	private bool show = false;


	}

In DropdownButtonItem.razor:

<a class="dropdown-item" href="@Href">@ActionName</a>

@code {
	[Parameter]
	public string? Href { get; set; }

	[Parameter]
	public string? ActionName { get; set; }

	
}

In the nav bar:

<DropdownButton Title="Button text">
				
	<DropdownButtonItem Href="#" ActionName="Button text" />
	<DropdownButtonItem Href="#" ActionName="Button text" />
	<DropdownButtonItem Href="#" ActionName="Button text" />
				
</DropdownButton>

Thank you