slideDown菜单-添加更多级别的问题

我有这个菜单正在处理…

最初，"二级"将出现在"一级"之下。我一直能把它移到第二列，一直坚持到顶部。据我所见，它在起作用！

我遇到的问题是添加更多的列，因为我至少需要另一个级别，可能是两个级别。

我想我已经处理了HTML部分（参见项目2-项目2-1-项目2-1-1），现在的问题是脚本。我试着复制当前的，但就是无法使其工作。。。

如有任何帮助，我们将不胜感激。感谢

Fiddle

HTML:

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

JS:

$('.level-2').hide();
  $('.level-1').on('click', function(){
    if(!($(this).children('.level-2').is(':visible'))){
      $('.level-2').slideUp();
      $(this).children('.level-2').slideDown();
    } else {
    $('.level-2').slideUp();
  }
});
$('.level-2').on('click', function(e){
  e.stopPropagation();
});

CSS：

body{
    margin: 0px;
    border: 0;
    overflow: hidden;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000000;
}
ul li {
    position: relative;
}
li ul {
    position: absolute;
    left: 120px;
    top: 0;
    display: none;
}
ul li a {
    text-decoration: none;
    color: #000000;
}
.level-1 {
    position: relative;
    top: 20px;
    left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}
.level-2 {
    position: fixed;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}
.level-3 {
    position: fixed;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0em;
    text-transform: uppercase;
}