Hover dropdown menu out of screen - html

Question

.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);
}
<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">
<span data-bind="text: name"></span>
</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>
Good Day, I am facing some problem in my hover dropdown submenu, if in the full size of browser, the submenu item of my last menu is only show two items but actually there have 5 items. How can I make the submenu showing upward to prevent the items be hidden? Also if I smaller the browser screen, the submenu also will be hidden from browser. I was using bottom: cal() before, but the position of submenu also will crashed. Is there any better solution?