固定位置的下拉菜单悬停不起作用

如何解决固定位置的下拉菜单悬停不起作用

我遇到了以下问题：我有一个导航栏，当鼠标悬停在特定项目上时，我想在上面显示一个下拉菜单。

当我将鼠标悬停在特定项目上时，下拉列表会按预期显示，但如果我将鼠标移离触发显示下拉列表的项目，它不会持续存在。

有人可以建议如何解决这个问题吗？

逻辑是：

<span class="navigation_bar_product_category">
<div class="backdrop"/> </span>

这是我使用的 CSS 代码：

.navigation_bar_product_category {
    font-size: 1.5rem;
    z-index:1;
  };
  .backdrop {
    width:100%;
    height:300px;
    display:none;
    background-color: white;
    z-index:2;
    right: 0px;
    left:0px;
    position:fixed;
    top:70px;
    Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
};
.navigation_bar_product_category:hover .backdrop {
    display:block;
  }

非常感谢任何支持！