Hover下拉菜单超出屏幕显示不全，求可靠调整方案

我在实现Hover触发的dropdown子菜单时遇到以下问题：

• 浏览器全屏状态下，最后一个菜单的子菜单仅显示2项（实际包含5项）；
• 缩小浏览器窗口后，子菜单会超出屏幕范围。

此前我尝试使用bottom: calc()来调整，但导致子菜单位置错乱。请问有什么更优的解决方案？

当前实现代码 #

CSS代码 #

.sidebar-left .dropdown {
      position: static;
    }

    .sidebar-left .dropdown .dropdown-menu {
      position: absolute;
      z-index: 10;
      display: none;
    }

    .sidebar-left .dropdown:hover .dropdown-menu{
      position: absolute;
      display: block;
      left: 63px;
      transform: translateY(-50px);
    }
    .sidebar-left .dropdown:hover > .dropdown-menu{
      display: block;
    }

    .sidebar-left.open .dropdown:hover .dropdown-menu{
      position: absolute;
      display: block;
      left: 273px;
    }

    .sidebar-left.open li[aria-expanded="true"]:hover > .dropdown-menu{
      display: none;
    }


    .sidebar-left.open .dropdown:hover > .dropdown-menu{
      display: block;
    }

    .dropdown-menu{
      position: absolute;
      padding-top: 0;
      padding-bottom: 0;
      box-shadow: 2px 2px 2px 2px #222;
      background-color: #4c5569;
      border-radius: 1px;
    }
    .dropdown-menu li{
      margin-top: 0;
      margin-bottom: 0;
      padding: 15px 25px;
      min-width: 175px;
    }

    .dropdown-menu li a span {
      font-size: .8rem;
      line-height: 1rem;
      color: #fff;
      text-decoration: none;
    }

    .dropdown-menu li:hover {
      background-color: rgba(255,255,255,.05);
    }

HTML代码 #

<div class="sidebar-left" id="sidebar">
      <div class="sidebar-header">
          <div class="sidebar-title">Navigation</div>
          <div class="sidebar-collapse" id="sidebar-collapse" data-bind="click: toggleOpen">
            <i class="fa-solid fa-bars" ></i>
          </div>
      </div>
      <div class="sidebar">
          <div class="sidebar-content">
              <nav class="sidebar_nav" role="navigation">
                  <ul id=sidebar-accordion class="sidebar_nav-main" data-bind="foreach: {data:items}">
                      <li class="sidebar-link dropdown" data-bind="css: {'active': $data.isActive() ? true : false}, attr: { 'data-target': '#collapse' + $index(), 'aria-expanded': false, 'data-toggle': 'collapse' } ">
                          <a href="javascript:void(0)" data-bind="attr: {'href': $data.parent_link}" class="sidebar_main-link">
                              <i data-bind="class: $data.icon"><i data-bind="class: $data.icon2"></i></i>
                              <span class="sidebar-item" data-bind="text: name"></span>
                          </a>
                          <ul class="dropdown-menu sidebar_submenu" data-bind="foreach: $data.children">
                                <li class="dropdown-item sidebar_submenu-item" data-bind="class: $data.className">
                                    <a href="javascript:void(0)" data-bind="attr: { 'href' : $data.link}"><span data-bind="text: name"></span></a>
                                </li>
                          </ul>
                          <div class="sidebar-subchild" id="sidebar-subchild" onclick="event.stopPropagation()">
                            <ul data-parent="#sidebar-accordion" class="collapse sidebar_submenu" data-bind="attr: { id: 'collapse' + $index()}, foreach: $data.children">
                              <li class="sidebar_submenu-item" data-bind="class: $data.isSelectModule">
                                <a target="_self" data-bind="attr: { 'href' : $data.link}"><span data-bind="text: $data.name"></span></a>
                              </li>
                            </ul>
                          </div>
                      </li>
                  </ul>
              </nav>
          </div>
      </div>
    </div>

问题截图 #

内容的提问来源于stack exchange，提问作者Chan