CSS Vertical menu - submenu stay hidden because of scrollbar?

I'm trying to create a fixed vertical menu with a lot of menu items so I thought it would be a good idea to use a scrollbar. Now the problem is, my submenus stay hidden when I hover over a menu item and I think this is happening because of that scrollbar. Here's what I tried :

http://jsfiddle.net/zb7o4dyv/2/

<nav id="left-navbar">    <div id="left-menu">      <ul id="menu-menu" class="left-bar">              <li class="menu-item menu-item-has-children">          <a href="#">Menu</a>          <ul class="sub-menu">            <li class="menu-item"><a href="#">Submenu</a></li>            <li class="menu-item"><a href="#">Submenu</a></li>          </ul>        </li>                <li class="menu-item menu-item-has-children">          <a href="#">Menu</a>          <ul class="sub-menu">            <li class="menu-item"><a href="#">Submenu</a></li>            <li class="menu-item"><a href="#">Submenu</a></li>          </ul>        </li>              <li class="menu-item">          <a href="#">Menu</a>        </li>          <li class="menu-item">          <a href="#">Menu</a>        </li>          <li class="menu-item">          <a href="#">Menu</a>        </li>        </ul>    </div>  </nav>   

#left-navbar{      display: flex;      z-index: 10;      width: 100%;      background-color: #379264;      font-weight: bold;      box-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.7);      text-shadow: 1px 1px 2px black;  }    #left-navbar{      width: 350px;      height: 100%;      flex-direction: row;      position: fixed;  }    #left-navbar:hover{      overflow-y: auto;  }    .left-bar li a{      padding: 0.8vw;  }    #left-menu{      height: auto;      width: 100%;      position: relative;  }    #left-menu .left-bar{      margin-top: 0;      height: 100vh;  }    .left-bar{      display: flex;      flex-direction: column;      padding: 0;       list-style-type: none;  }    .left-bar li{      position: relative;  }    .left-bar li a{      text-decoration: none;      padding-left: 2vw;      padding-right: 2vw;      font-weight: bold;      display: block;  }    #left-navbar ul li a{      line-height: 20px;  }    .left-bar li a:hover{      background-color: #16663d;      text-shadow: 1px 1px 1px black;      box-shadow: inset 0px 0px 4px 0.5px rgba(0, 0, 0, 0.5);  }    .left-bar li .sub-menu{      display: none;      left: 100%;      padding: 0;      list-style-type: none;      max-width: 15vw;      box-shadow: 0px 1.5px 3px rgba(0, 0, 0, 0.7);      border-top-right-radius: 5px;      border-bottom-right-radius: 5px;      background-color: #379264;  }    .left-bar .sub-menu li{      border-bottom: 0.5px solid rgba(0, 0, 0, 0.25);  }    .left-bar .sub-menu li:last-of-type{      border-bottom: none;  }    .left-bar .sub-menu a, .left-bar > li > a, .left-bar li a:hover{      color: white;  }    .left-bar > .menu-item-has-children:hover > .sub-menu{      display: block;      width: 100%;  }    .left-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover > .sub-menu{      display: block;  }    .left-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover > .sub-menu{      position: absolute;      top: 0;      left: 100%;      width: 100%;  }    .sub-menu{      z-index: 100;  }    .left-bar > .menu-item-has-children:hover > .sub-menu{      position: absolute;      top: 0;  }    

https://stackoverflow.com/questions/65839163/css-vertical-menu-submenu-stay-hidden-because-of-scrollbar January 22, 2021 at 12:06PM