Angular 在Firefox上快速隐藏菜单栏项目&；边缘

我使用的是Angular 4、Priming 4.3.0、chrome版本78.0.3904.108（Build ufficiale）（64位）和Microsoft Edge 44.18362.329.0

我使用菜单栏来放置导航栏来显示一些页面。我已经更改了菜单栏的css，因为颜色与我的应用程序不匹配。菜单栏在Chrome上工作，我可以将鼠标移动到每个项目和子项目上，没有任何问题，但在Firefox和Edge上，子项目隐藏得非常快。菜单栏中的onItemMouseLeave函数似乎在一个项的底部和下一个项的顶部之间被激活，从而关闭菜单栏的子项。代码如下：

模板：

<section>
  <div id="menu-box2">
    <div class="container menucus">
      <div class="row">
        <div class="col-12">
          <p-menubar #menu [model]="items" styleClass="menucus"></p-menubar>

        </div>
      </div>
    </div>
  </div>
</section>

<router-outlet></router-outlet>

CSS:

我正在强制每个项目/子项目使用样式，因为如果我不这样做，默认颜色将是Priming菜单栏样式的颜色

正如我所说，在Chrome上工作就像一种魅力，但在firefox&edge上却不起作用

我不能更新到更新的版本，因为我所在的地方不允许我这么做，所以如果有什么东西被弃用了，我也无能为力。我需要找到一个方法来做到这一点。谢谢你的帮助

----重要的---- 如果我不更改de-CSS，唯一与菜单颜色相同的子项就是第一个菜单的第一个子项。如果我使用n:child（数字），它会在菜单底部添加一个项目大小的新矩形，该矩形包含的项目较少，因此n:child解决方案不适用于我：（

****更新**** 还有另一个CSS修改了菜单框2，可能这就是它带来的问题。我删除了菜单框2，并且该栏显然没有显示颜色，但边缘上的问题已经消失。这意味着我需要修改该CSS。但似乎找不到导致我这个问题的部分。我将把代码放在这里，然后然后将尝试执行一个plunkr（或任何称为xD的操作）

Styles.SCSS，它位于整个应用程序的根文件夹中

@import "~bootstrap/scss/bootstrap.scss";
@import "~primeng/resources/themes/omega/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.min.css";
@import "~js4u-styles/scss/variables";
@import "theme/CompanyTheme";

$menu1-height: 60px;
$menu2-height: 50px;
$color-red-tag: #d32f2f;
$color-green-tag: #388e3c;
$color-auth-tag: #5393bc;

#menu-box {
  background-color: $u-blue;
  min-height: $menu1-height;
  a {
    line-height: $menu1-height;
  }
}

#menu-box2 {
  background-color: $u-blue-l;
  min-height: $menu2-height;
  a {
    line-height: $menu2-height;
  }
}

.header_logo {
  margin-top: 20px;
  height: 60px;
  vertical-align: middle;
}

.page-content {
  h2 {
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  margin-top: 50px;
}
.ui-dropdown {
  min-width: 10px;
}

#menu-box,
#menu-box2 {
  list-style-type: none;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  ul {
    padding: 0;
    margin: 0;
    height: 100%;
    li {
      text-align: center;
      display: inline-block;
      height: 100%;
      // font-size: 1.2em;
      // line-height: 40px;
      // height: 40px;
      // border-bottom: 1px solid #888;
      a {
        transition: background-color 0.2s;
        display: inline-block;
        text-decoration: none;
        height: 100%;
        min-width: 120px;
        color: white;
        padding: 0 20px;
      }
      a.noLink {
        padding: 0;
        text-align: left;
      }

      a:hover,
      a:focus,
      a:active {
        // color: #999;
        font-weight: 600;
        text-decoration: none;
      }
      a {
        text-decoration: none;
        transition: color 0.1s, background-color 0.1s;
      }
      a {
        position: relative;
        display: block;
        transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
        color: #fff;
      }
      a::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 5px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #fff;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s, transform 0.2s ease-out;
      }

      a:hover::before,
      a:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
      }
    }
  }
}

---

你能发布足够的代码来重现问题吗？我试图使用你发布的代码创建一个示例，但没有重现。你也可以尝试使用F12开发工具来比较Chrome和Edge浏览器中的CSS样式，是否有一些CSS样式在Edge浏览器中不起作用，此外，请检查是否附加了一些JQu我会创建它（第一次创建它，所以需要一些时间xD），但问题似乎是另一个调用#menu-box2（facepalm）的style.scss。因为我删除了它，问题就消失了。我将首先更新问题中的信息，以查看导致此问题的原因。最后，它是样式主题的样式高度/宽度

::ng-deep .ui-menu,.ui-menu .ui-menu-child{
    border: 0px;
    background:#5393bc 0 0 repeat-x !important;
}
::ng-deep .ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color: #5393bc;
    border: none;
}
::ng-deep .ui-menu .ui-menuitem .ui-state-active{
    background-color: #5393bc;
}
::ng-deep .ui-menu .ui-menuitem.ui-menuitem-active>.ui-menuitem-link,
.ui-menu .ui-menuitem .ui-menuitem-link:hover{
    background-color:#186ba0;
    border: none;

}
::ng-deep .menucus{
    background: #5393bc !important;
}
::ng-deep .ui-menu .ui-menuitem-parent, .ui-menu .ui-menuitem{
    margin: auto;
}  
::ng-deep .ui-menuitem .ui-widget .ui-corner-all { 
    border-radius:0;
}

::ng-deep .ui-menu .ui-menu-parent .ui-menu-child{
    padding: 0;
}

@import "~bootstrap/scss/bootstrap.scss";
@import "~primeng/resources/themes/omega/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.min.css";
@import "~js4u-styles/scss/variables";
@import "theme/CompanyTheme";

$menu1-height: 60px;
$menu2-height: 50px;
$color-red-tag: #d32f2f;
$color-green-tag: #388e3c;
$color-auth-tag: #5393bc;

#menu-box {
  background-color: $u-blue;
  min-height: $menu1-height;
  a {
    line-height: $menu1-height;
  }
}

#menu-box2 {
  background-color: $u-blue-l;
  min-height: $menu2-height;
  a {
    line-height: $menu2-height;
  }
}

.header_logo {
  margin-top: 20px;
  height: 60px;
  vertical-align: middle;
}

.page-content {
  h2 {
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  margin-top: 50px;
}
.ui-dropdown {
  min-width: 10px;
}

#menu-box,
#menu-box2 {
  list-style-type: none;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  ul {
    padding: 0;
    margin: 0;
    height: 100%;
    li {
      text-align: center;
      display: inline-block;
      height: 100%;
      // font-size: 1.2em;
      // line-height: 40px;
      // height: 40px;
      // border-bottom: 1px solid #888;
      a {
        transition: background-color 0.2s;
        display: inline-block;
        text-decoration: none;
        height: 100%;
        min-width: 120px;
        color: white;
        padding: 0 20px;
      }
      a.noLink {
        padding: 0;
        text-align: left;
      }

      a:hover,
      a:focus,
      a:active {
        // color: #999;
        font-weight: 600;
        text-decoration: none;
      }
      a {
        text-decoration: none;
        transition: color 0.1s, background-color 0.1s;
      }
      a {
        position: relative;
        display: block;
        transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in;
        color: #fff;
      }
      a::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 5px;
        left: 0;
        height: 3px;
        width: 100%;
        background-color: #fff;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: color 0.1s, transform 0.2s ease-out;
      }

      a:hover::before,
      a:focus::before {
        transform-origin: left top;
        transform: scale(1, 1);
      }
    }
  }
}