如何覆盖悬停事件以单击CSS下拉菜单的事件

Question

我正在尝试创建一个纯CSS多级下拉菜单。我得到它来悬停工作。但是，我只希望它悬停在子菜单中，但是可以单击主菜单项以展开菜单。我试图添加jquery来覆盖将鼠标悬停在clickable动作上，但是它不起作用。我在做什么错了？

<nav class="nav">

    主页

<li class="menu-item subItem"><a href="">Menu1<b class="down-arrow"></b></a>      
  <ul class="submenu">
    <li class="menu-item"><a href="">Menu Item 1</a></li>
    <li class="menu-item subItem"><a href="">Submenu <b class="right-arrow"></b></span></a>
      <ul class="submenu">
      <li class="menu-item"><a href="">Sub1</a></li>
      <li class="menu-item"><a href="">Sub2</a></li>

      <li class="menu-item subItem"><a href="">3rd Level <b class="right-arrow"></b></span></a>
        <ul class="submenu">
          <li class="menu-item"><a href="">Level1</a></li>
          <li class="menu-item"><a href="">Level2</a></li>
        </ul>
      </li>
      </ul>
    </li>
  </ul>
</li>

<script>
$(function() {     
$('.menu-item').on('click',function(e) {
    e.preventDefault();
    $('.submenu').show();
});
});
</script>