在Flexbox导航栏中创建下拉菜单时出现问题，无法正常显示下拉菜单内容

Question

我一直难以在使用flexbox样式化的导航栏下方定位和显示下拉菜单，它似乎隐藏了从flex容器溢出的下拉菜单，即使它被指定了位置：absolute和z -指数。 dropdown menu hidden vertically display，请帮助我，看看我的代码。

    <ul class="topNav" id="myTopNav" role="navigation">
        <li>shopping bag</li>
        <li>sign in</li>
        <li class="all_categories">          
          <ul class="categories">                
            <li class="category-women">
              <a href="#">women</a>
              <ul class="sub-category">
                <li><a href="#"> New in!</a></li>
                <li><a href="#"> Tops</a></li>
                <li><a href="#"> Coats & Jackets</a></li>
              </ul>
            </li>
            <li class="category-men"><a href="#">men</a></li>
            <li class="category-home"><a href="#">home & gift</a></li>
          </ul>
        </li>
    </ul>

.topNav是flex容器，其样式如下：

.topNav {
  width: 100%;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 0.6%;
  padding-bottom: 0.6%;
  border-bottom: #c9c8c7 0.02em solid;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}

导航栏中的链接显示为块； 这是我的下拉菜单代码：

.category-women{
  border: 1px dotted red;
}

.sub-category {
  display: none;
  position: absolute;
  background-color: green;
  min-width: 100px;
  z-index: 2;
  border: 1px solid yellow;
}

.sub-category a {
  font-size: 1em;
  display: block;
  padding: 0;
  margin: 0 8px;
  background-color: green;
}

.category-women:hover .sub-category {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}