FF无法从下拉菜单中选择项目

Question

有一个导航栏，该导航栏在鼠标悬停时显示（hoverStateIn()事件，在鼠标离开时消失（hoverStateOut()事件）：

HTML

<div id="shownav" (mouseenter)="hoverStateIn()" (mouseleave)="hoverStateOut()">
    <nav class="navbar navbar-dark navbar-expand-md jh-navbar" *ngIf="isHover">
    ...
    </nav>
</div>

打字稿：

hoverStateIn() {

    this.isHover = true;

    document.getElementById("main-container").style.paddingTop = "70px";
    document.getElementById("styleSelector").style.top = "95px";
}

hoverStateOut() {
    this.isHover = false;

    document.getElementById("main-container").style.paddingTop = "0";
    document.getElementById("styleSelector").style.top = "25px";
}

导航栏包含一个下拉菜单，当尝试从下拉菜单中选择一项时，导航栏消失（问题仅在Firefox中存在）。

似乎FF中的下拉控件失去了焦点，并触发了hoverStateOut()。 该如何解决？

Stackblitz