Jquery 导航子菜单

我想问一下如何使用jQuery实现这个子菜单

例如，我的菜单代码

<div class="menu">
<ul class="nav nav-pills">
<li class="divider"><a href="#">Our Company</a></li>
<li class="divider"><a href="#">Products</a></li>
<li class="divider"><a href="#">Contact Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
</ul>
</div>

和我的子菜单代码：

 <div class="submenu">
   <ul class="nav nav-pills">
    <li class="divider-point"><a href="#">ATC</a></li>
    <li class="divider-point"><a href="#">Radars</a></li>
    <li class="divider-point"><a href="#"> Components </a></li>
   </ul>
   </div>

最终结果应该是这样的：

或的可能副本

function subMenu(show) {
    if (show){
      document.getElementById('sub_menu').style.display = 'block';
    } else {
      document.getElementById('sub_menu').style.display = 'none';
    }
}