悬停在子ul子菜单上时，li菜单标题隐藏

Question

我正在构建此仪表板，问题是当我将鼠标悬停在侧栏中的li上时，将显示子菜单，但是当我将光标从菜单标题移到子菜单ul时，标题就会消失。 将窗口大小扩大到完全后，测试代码。我已将负责在悬停菜单上显示菜单的代码标记为“负责在悬停菜单上显示菜单的代码” 我也不能摆脱标题上的黑色标记 https://i.imgur.com/TVnKPMG.png

var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
	if(minWidth768.matches) {
  bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
  bdy.classList.toggle('sidebar-expand');
}
});


var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
	treeview[i].parentNode.addEventListener("click", function(ev) {
	ev.preventDefault();
	this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){	
	submenu[x].addEventListener("click", function(e) {
		e.stopPropagation();
	})
  }
 });
}

/*HEADER*/
* {
	transition: all 300ms linear;
}

.main-header {
    position: relative;
    max-height: 100px;
    z-index: 1030;
}

.main-header .logo {
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    width: 230px;
    padding: 0 15px;
    font-weight: 300;
    background: #7f224f;
    overflow: hidden;
    color: #fff;
}

.main-header .navbar {
	margin-bottom: 0;
    margin-left: 230px;
    border: none;
    min-height: 50px;
    border-radius: 0;
    background: #9b265f;
}

.toggler {
  margin-top:10px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  margin-left: 10px;
}

.logo-mini {
    display: none;
  }

/*SIDEBAR*/

#main-sidebar{
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 70px;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    background: #222d32;
}

.user-panel {
  position: relative;
  width: 100%;
  padding: 10px;
  overflow: hidden;
}

.user-p-image img {
    width: 100%;
    max-width: 50px;
    height: auto;
}

.user-panel .info {
    padding: 5px 5px 5px 15px;
    line-height: 1;
    position: absolute;
    left: 55px;
    color: #fff;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
}

.sidebar-menu li.header {
  padding: 10px 25px 10px 15px;
  font-size: 12px;
  color: #4b646f;
  background: #1a2226;
}

.sidebar a {
  color: #b8c7ce;
  text-decoration: none;
}

.sidebar-menu > li > a {
  padding: 12px 5px 12px 15px;
  display: block;
  background: #111618;
  margin: 6px 0;
}

/*SIDEBAR TOGGLE CODE*/

@media (min-width: 768px) {
  .bdy.sidebar-collapse .main-header .logo {
    width: 50px !important;
  }
  .bdy.sidebar-collapse .main-header .logo > .logo-mini {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 18px;
  }
  .bdy.sidebar-collapse .main-header .logo > .logo-lg {
    display: none;
  }
   .bdy.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
  }
   .bdy.sidebar-collapse #main-sidebar {
    width: 50px !important;
  }
  .bdy.sidebar-collapse #content-wrapper {
  	margin-left: 50px;
  }
}

@media (max-width: 767px) {
	.main-header .logo {
    width: 0px;
  }
   .main-header .logo > .logo-mini {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 18px;
  }
  .main-header .logo > .logo-lg {
    display: none;
  }
   .main-header .navbar {
    margin-left: 0px;
  }
   #main-sidebar {
    width: 0px !important;
    padding-left: 0px !important;
    overflow: hidden;
  }
   #content-wrapper {
  	margin-left: 0px !important;
  }

  .bdy.sidebar-expand .main-header .logo {
    width: 230px;
  }
  .bdy.sidebar-expand .main-header .logo > .logo-mini {
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 18px;
  }
  .bdy.sidebar-expand .main-header .logo > .logo-lg {
    display: none;
  }
   .bdy.sidebar-expand .main-header .navbar {
    margin-left: 230px;
  }
   .bdy.sidebar-expand #main-sidebar {
    width: 230px !important;
  }
  .bdy.sidebar-expand #content-wrapper {
    margin-left: 230px;
  } 
}
/*END OF TOGGLE CODE*/

/*LIST TOGGLE*/
.treeview-menu {
  display: none;
}
.treeview.menu-open .treeview-menu{
  display: block;
}
/*END OF LIST TOGGLE*/
   
/*Code Responsible for showing menu on hover*/

@media (min-width: 768px) {
  .bdy.sidebar-collapse .sidebar-menu > li > a > span, 
  .bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
    display: none !important;
  }

  .bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
    display: block !important;
    position: absolute;
    top: 0;
    width: 180px;
    background: #111618;
    padding: 12px 0;
    left: 49px;
    z-index: 99999999999999;
  }

  .bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
     display: block !important;
     background: grey;
     position: absolute;
      width: 180px;
      left: 49px;
      z-index: 999999999999;
  }

  .bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    position: relative !important;
    float: right;
    width: auto !important;
    left: 180px !important;
    top: -22px !important;
    z-index: 900;
  }

  .bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 44px;
    margin-left: 0;
  }

}



  /*CONTENT*/
 #content-wrapper {
  padding: 15px;
  margin-left: 230px;
  min-height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">	
<div class="wrapper">
	<header class="main-header">
		<a href="index.html" class="logo">
	      <!-- mini logo for sidebar mini 50x50 pixels -->
	      <span class="logo-mini"><b>K</b>Ame</span>
	      <!-- logo for regular state and mobile devices -->
	      <span class="logo-lg"><b>Ame</b>Xub</span>
	    </a>
	   <nav class="navbar navbar-default">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	     <div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

	      <ul class="nav navbar-nav navbar-right">
	    
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dinesh Thapa <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	</nav>
	</header>

	<div id="main-sidebar">
	  <div class="sidebar">
		<div class="user-panel">
			<div class="pull-left user-p-image">
				<img src="user.jpg" class="img-circle">
			</div>
			<div class="pull-left info">
			<p>Dinesh Thapa</p>
		<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
		</div>
	</div>

		<ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-files-o"></i>
            <span>Layout Options</span>
            <span class="pull-right-container">
            	 <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
            <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
            <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
            <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
          </ul>
        </li>
        <li class="treeview">
        	<a href="#">
            <span>dsdssdd</span>
          </a>
        </li>
      </ul>
	 </div>
	</div>

<div id="content-wrapper">
	<div class="row">
	<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>


	<footer style="position: absolute; bottom: 0;">
		copyright
	</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

https://jsfiddle.net/nd9ky5x2/