Подменю закрывается при наведении мыши

Question

Я пытаюсь реализовать меню и подменю динамически, по какой-то причине, подменю отображается правильно, но как только закрывается выход из подменю меню. Он не позволяет выбрать подменю

<ul class="nav_menu_container">
   <li class="nav_menu"
      th:each="menuGroup : ${authorizedMenuGroups}"
      th:id="${menuGroup.menuKey}">
      <a
         th:key="${menuGroup.menuKey}"
         th:onclick="displayDynamicReports(this.getAttribute('key'))"><span
         th:text="${menuGroup.menuName}"></span> </a><i
         class="fa fa-angle-down"></i>
      <div class="nav_submenu">
         <ul>
            <li class="submenu"
               th:each="menuItem : ${menuGroup.menuItems}"><a
               th:key="${menuItem.report.reportName}"
               th:onclick="displayReports(this.getAttribute('key'))"
               th:text="${menuItem.menuItemName}"> </a></li>
         </ul>
      </div>
   </li>
</ul>

и css is:

.main-nav-center-new .nav_menu_container .nav_menu {
     position: relative;
     cursor: pointer;
     margin-left: 15px;
    /* padding-bottom: 28px;
     */
     font-family: Tondo;
    /* reducing font size and weight to have more space */
    /* font-size: 14px;
     font-weight: 700;
    */
     font-size: 13px;
     font-weight: 600;
     font-stretch: normal;
     font-style: normal;
     line-height: normal;
    /* reducing letter space to have more space to menu */
    /* letter-spacing: .2px;
     */
     letter-spacing: .1px;
     text-align: center;
    /* added to remove shaking effect */
     min-height: 40px;
    /* test */
     float: left;
}
 .main-nav-center-new .nav_menu_container .nav_menu a {
     color: #393939;
}
/* test */
 .main-nav-center-new .nav_menu_container .nav_menu a:link, .main-nav-center-new .nav_menu_container .nav_menu a:visited {
     padding: 10px 15px;
     text-decoration: none;
     color: #111111;
     display: block;
}
 .main-nav-center-new .nav_menu_container .nav_menu a:hover, .main-nav-center-new .nav_menu_container .nav_menu a:focus {
     color: #222222;
}
/* test end */
 .main-nav-center-new .nav_menu_container .nav_menu i {
     margin-left: 3px;
     font-weight: bolder;
     font-size: 10px 
}
 .main-nav-center-new .nav_menu_container .nav_menu .nav_submenu {
     display: none;
     position: absolute;
     transition: all .7s ease 0s;
     top: 46px;
    /* Changed to start from the start of li*/
    /* left: -35px;
     */
     left: -5px;
     width: 240px;
     border-radius: 4px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
     background-color: #fff 
}
/* .nav_menu_container li a:hover{
     left: 100%;
     start at the right edge of the parent li top:0%;
     always align to the top of the parent li width:180px;
     position: absolute;
}
 */
 .main-nav-center-new .nav_menu_container .nav_menu .nav_submenu ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     text-align: left;
     padding-left: 0 
}

Я уже просмотрел похожие посты в переполнении стека и попробовал абсолютные и относительные позиции, не могли бы вы сообщить мне, что мне не хватает ??