FF无法从下拉列表中选择项目

鼠标悬停时会显示导航栏( hoverStateIn() 事件),鼠标离开时消失( hoverStateOut() 事件):

<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";
}

Navbar包含一个下拉列表,当尝试从下拉列表中选择一个项目时,Navbar会消失(这个问题只存在于Firefox中)。

hoverStateOut() 触发器。 如何解决这个问题?

Stackblitz