Меню Stop Hover закрывается, когда пользователь выходит из секции

Question

У меня есть боковое меню, которое открывается, когда пользователь наводит курсор на него.В одном разделе, когда пользователь нажимает на элемент меню, рядом с ним открывается всплывающее окно.

Но когда вы переходите на поповер, чтобы выбратьВ раскрывающемся меню всплывающее меню закрывается и покидает всплывающее окно.Я попытался использовать stopPropagation (), но меню все еще закрывается.

Есть идеи, как решить эту проблему?

        <li class="active treeview menu-open" id="testExecution">
      <!-- sidebar menu item 1: Test Execution -->
      <a>
        <i class="fa fa-bars"></i> <span>Test Execution</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
    <ul class="treeview-menu">
      <!-- sidebar submenu -->
    <li class="active treeview menu-open" id="partnersTree" onclick="closePopovers()">
      <a>
        <i class="fa fa-circle-o"></i> <span>Partners</span>
        <span class="pull-right-container">
          <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
      <ul class="treeview-menu">
        <li class="active" id='tab1'><a><i class="fa fa-circle"></i> tab1</a></li>
        <li id='tab2'><a><i class="fa fa-circle"></i>tab2</a></li>
        <li id='tab3'><a><i class="fa fa-circle"></i> tab3</a></li>
      </ul>
    </li>
    <li class="treeview" id="historySettings">
         <a>
         <i class="fa fa-circle-o"></i> <span>History Settings</span>
         <span class="pull-right-container">
         <i class="fa fa-angle-left pull-right"></i>
         </span>
         </a>
         <ul class="treeview-menu">
            <li><a id="versionHistory" data-container="body" data-toggle="popover" data-placement="right">
               <i class="fa fa-gear"></i> <span>Version History</span>
               <span class="pull-right-container">
               <i class="fa fa-angle-right pull-right"></i>
               </span>
               </a>
            </li>
            <div class='_content' id='versionHistoryPicker' style='width:250px'>
              <div class="form-group">
               <label>Select Version:</label>
               <select class="form-control" id="versionDropdown" style="background-color:#ffffff; color:#777777" >
                 <option selected="selected" disabled="true"> Please Select Version </option>
               </select>
             </div>
               <button type="submit" class="btn btn-default btn-block" onclick="drawHistoryCharts()">Submit</button>
           </div>
            <li><a id="dateHistory" data-container="body" data-toggle="popover" data-placement="right">
               <i class="fa fa-gear"></i> <span>Date History</span>
               <span class="pull-right-container">
               <i class="fa fa-angle-right pull-right"></i>
               </span>
               </a>
            </li>
            <div class='_content' id='dateHistoryPicker' style='width:250px'>
              <div class="form-group">
               <label>Date range:</label>
               <div class="input-group">
                 <div class="input-group-addon">
                   <i class="fa fa-calendar"></i>
                 </div>
                 <input type="text" class="form-control pull-right" id="reservation">
               </div>
             </div>
             <button type="submit" class="btn btn-default btn-block" onclick="dateHistoryChart()">Submit</button>
           </div>
           <li><a onclick="onLoad()">
              <i class="fa fa-refresh"></i> <span>RESET PAGE</span>
              <span class="pull-right-container">
              </span>
              </a>
           </li>
         </ul>
      </li>
  </ul>

<script type="text/javascript">
$("#testExecution").mouseout(
      function(e) {
        event.stopPropagation();
      });
</script>