悬停在类别上时，使用垂直菜单在右侧显示子类别

Question

我对我要实现的内容有一个固定的侧边栏，我想要实现的是，每次我将鼠标悬停在一个类别上时，它会在右侧显示子类别。但我试着这样做，它只是没有按照我的预期工作。它只包含与类别相同的块中的子类别，而不是自己的块。

我尝试在li：hover上添加z-index但仍然无法正常工作。任何人都知道可能是什么问题？

	function filterContent(elmnt) {
  var x, i, val, show, showh2, showbr;
  val = elmnt.value;
  x = document.getElementById("leftmenuinnerinner").getElementsByTagName("*");
  for (i = 1; i < x.length; i++) {
    if (x[i].tagName == "H2") {
      if (showh2) {
        if (show == false) {
          showh2.style.display = "none";
        } else {
          showh2.style.display = "block";
        }
      }
      show = false;
      showh2 = x[i];
    }
    if (x[i].tagName == "BR") {
      if (showbr) {
        if (show == false) {
          showbr.style.display = "none";
        } else {
          showbr.style.display = "block";
        }
      }
      showbr = x[i];
    }
    if (x[i].tagName == "A") {
      if (x[i].innerHTML.toUpperCase().indexOf(val.toUpperCase()) == -1) {
        x[i].style.display = "none";
      } else {
        x[i].style.display = "block";
        show = true;
      }
    }
    if (showh2) {
      if (show == false) {
        showh2.style.display = "none";
      } else {
        showh2.style.display = "block";
      }
    }      
  }
}

/****** Side Bar on the Left Starts*******/
.sidebar {
    overflow: inherit;
}
.sidebar {
    width: 500px;
    background-color: #fff;
    position: fixed!important;
    z-index: 1;
    overflow: auto;
}
#leftmenuinner {
    position: fixed;
    top: 0;
    padding-bottom: 0;
    height: 100%;
    width: 200px;
    background-color: transparent;
}

#leftmenuinnerinner {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 2px;
}

.searchinput {
    background-image: url(../images/searchicon.png);
    background-position: 160px 8px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 14px;
    padding: 6px 6px 6px 40px;
    padding: 6px;
    border: 1px solid #ddd;
    margin: 10px 0 10px 5px;

}
#sidenav h2 {
    font-size: 21px;
    padding-left: 16px;
    margin: -4px 0 4px 0;
    width: 204px;
}
#sidenav ul {
    float: left;
    height:auto;
    list-style:none;
    

}
#sidenav li {
    margin-left: -40px;
    width: 120%;
    padding: 2px 0px 0px 0px;
}
#sidenav li:hover {
    background-color:#f36f25;
    color:#FFFFFF;
    z-index: 1000;
}

#sidenav li a {
    font-family: "Segoe UI",Arial,sans-serif;
    text-decoration: none;
    display: block;
    padding: 2px 1px 1px 16px;
    padding:0.42em 8%;
	color: #666;
	display: block;
	line-height: 1.6em;
	background: url(../images/drop_arrow.png) no-repeat 5px 11px; 	
  font-size: 12px;
}
#sidenav li ul {
    display: none;
    margin-top: 10px;
    padding: 0;
}
#sidenav li:hover ul {
    display: block;
}
#sidenav li:hover .sub-menu
{
    position: relative;   
    margin-top: -27.5px;
}
#sidenav .sub-menu li
{
    position: relative;
    display: block;
    top: 0;
    left: 100%;
    width: 100%;
    min-width: 180px;
    white-space: nowrap;
    z-index:1;
}
#sidenav .sub-menu li a
{
    display:inline-block;
    padding: 0 10px;
}

/****** Side Bar on the Left Ends*******/

<!-- Side Bar on the Left Starts -->
<div class='sidebar w3-collapse' id='sidenav'>
  <div id='leftmenuinner'>
    <div class='w3-light-grey' id='leftmenuinnerinner'>
      <input class="searchinput" placeholder="Search..." oninput="filterContent(this)">
      <h2 class="left"><span class="left_h2">All</span> Categories</h2>
      <ul>
        <li>
          <a target="_top" href="default.asp">Office & School Supplies</a>
          <ul class="sub-menu">
                <li><a herf="">Sub Link 1</a></li>
                <li><a href="">Sub Link 2</a></li>
          </ul>
        </li>
        <li>
          <a target="_top" href="default.asp">Classroom & School Supplies</a>
          <ul class="sub-menu">
                <li><a herf="">Sub Link 1</a></li>
                <li><a href="">Sub Link 2</a></li>
          </ul>
        </li>
        <li>
            <a target="_top" href="default.asp">Cars & Repairs Supplies</a>
           <ul class="sub-menu">
                <li><a herf="">Sub Link 1</a></li>
                <li><a href="">Sub Link 2</a></li>
          </ul>
        </li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      <li><a target="_top" href="default.asp">Office & School Supplies</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- Side Bar on the Left Ends -->