Juery hover menu content

Juery hover menu content

When I hover my menu content of the menu (single page template) will appear in the below. othe menu content are hide. how its going to achieve in jquery?


 <aside class="main-sidebar">
    <section class="sidebar">
     
      <ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        
        <li class="active1 treeview">
          <a href="#menu1">
            <i class="fa fa-link"></i>
            <span>menu1</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-double-right pull-right"></i>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-users"></i> <span>menu2</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-double-right pull-right"></i>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-pie-chart"></i>
            <span>menu3</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-double-right pull-right"></i>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-laptop"></i>
            <span>menu4</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-double-right pull-right"></i>
            </span>
          </a>
        </li>
       
      </ul>
    </section>
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
<section  id="menu1">
<div class="row">
<div class="board">
<div class="board-inner">
content here
</div>
</div>
</div>
</section>