Html JQueryUI手风琴不适用于多级菜单（项目重叠）

我使用JQueryUI Accordion创建垂直多级菜单，代码如下：

<ul class="accordion_menu">
  <li>
      <a href="#">Item 1</a>
  </li>
  <li>
      <a href="#">Item 2</a>
      <ul class="accordion_menu">
         <li><a href="#">Item 2 - 1 </a></li>
         <li><a href="#">Item 2 - 2</a>
             <ul class="accordion_menu">
                <li><a href="#">Item 2 - 2 - 1</a></li>
                <li><a href="#">Item 2 - 2 - 2 </a></li>
             </ul>
         </li>
         <li><a href="#">Item 2 - 3 </a></li>
         <li><a href="#">Item 2 - 4</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Item 3</a>
  </li>
</ul>

<script type="text/javascript">
    $(function() {
        $(".accordion_menu").accordion({event: "mouseover", fillspace: true, collapsible: true});
    });
</script>

$（函数（）{
$（“.accordion\u menu”）.accordion（{事件：“mouseover”，fillspace:true，可折叠：true}）；
});

在这个附加的快照中，您可以看到元素之间存在重叠

注: 如果我删除了“项目1”，那么它就会正常工作。

---

我在这里迷路了。我不熟悉Jquery。请指导我可能缺少的内容。

很难搜索，只是因为我以前使用过此插件，请下次尝试发布它

下面是一个改进的解决方案：

剧本

$(function() {
    $(".accordion_menu").accordion({event: "mouseover", fillspace: true, collapsible: true});
    $('.accordion_submenu').hide();

$(".submenu").mouseover(function () {
    $('.accordion_submenu').slideDown("fast");
}).mouseout(function(){
$('.accordion_submenu').slideUp("fast");
  });
    });

HTML

很脏，但能用

<ul class="accordion_menu">
  <li>
      <a href="#">Item 1</a>
  </li>
  <li>
      <a href="#">Item 2</a>
      <ul class="accordion_menu">
         <li><a href="#">Item 2 - 1 </a></li>
     <li><a href="#" class="submenu">Item 2 - 2</a></li>
         <ul class="accordion_submenu">
                <li><a href="#">Item 2 - 2 - 1</a></li>
                <li><a href="#">Item 2 - 2 - 2 </a></li>
         </ul>
         <li><a href="#">Item 2 - 3 </a></li>
         <li><a href="#">Item 2 - 4</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Item 3</a>
 </li>
</ul>