html - CSS Vertical menu - submenu stay hidden because of scrollbar?

Question

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/pft1x3ek/

<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;
}

question from:https://stackoverflow.com/questions/65839163/css-vertical-menu-submenu-stay-hidden-because-of-scrollbar

Answer 1

The offending item with your current code is this item.

#left-navbar:hover {
  overflow-y: auto;
}

You are setting overflow on the container only when it is hovered. You are correct that this is what is hiding your subnav. You can test this by commenting out the line above. I'm curious, though, what effect you are going for. Are you wanting for the main page and scrollbar to be independently scrollable? I think the solution also depends largely on how many menu items there will be and whether or not you are concerned with mobile/tablet.