Javascript 悬停时的Jquery向下滑动菜单

好的，我一直在尝试制作一个导航，当鼠标悬停时，会有一个盒子向下滑动，我发现：

第三个答案几乎适用于我，但我的问题是，当我悬停主菜单时，子菜单也会向下滑动，而当我悬停子菜单时，什么也不会发生

我不确定这是否可行，但我想做一个导航，只在我悬停的那一个上下滑动

这是到目前为止我的代码。我真的很烂，我不懂Jquery，所以如果你能帮我，请帮我。非常感谢你

Jquery

    $(document).ready(function () {
    var menu = $('.menu')

    menu.hide();

    $('#mainbutton').mouseover(

        function () {
            menu.stop(true, true).slideDown(400);
        }
    );

    $(".menu").mouseleave(

        function () {
            menu.stop(true, true).slideUp(400)
        })

});

CSS

        #navigation {
    border: solid 1px black;
    height: 300px;
}

.mainbutton {
    margin-top: 10px;
    -webkit-order: 2;
    margin-right: 0%;
    background-color: #f1f1f1;
}

.dropdown {
    -webkit-order: 3;
    background-color: #fff;
    border: 2px dotted #f1f1f1;
    width: 195px;
    height: auto;
    text-align: justify;
    background: url('http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=25977922');
}

.menu {
    display: -webkit-flex;
    -webkit-flex-flow: row nowrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: center;
    padding-left: 8%;
}

.menu a, a:visited {
    font-family: Abstrec, sans-serif;
    color: #505050;
    text-decoration: none;
    font-size: .5em;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 2px solid #dbdbdb;
    padding-bottom: 10px;
}

.menu a:hover {
    color: #bfbfbf;
    -webkit-transition:.3s;
    transition:.3s;
    border-bottom: 2px solid #aef4e7;
}

.itemone {
    -webkit-order: 1;
    height: auto;
    padding: 5px;
    z-index: 3;
    text-align: justify;
}

HTML

        <div class="navigation">
        <div class="nav">

                <div id="mainbutton">
                   <center> <a href="#">about</a> </center>
                </div> </div> </div>


        <div class="dropdown">

            <div class="menu">
                <div id="itemone"></div>

this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text

    <br></div></div>


        <div class="navigation">
        <div class="nav">

                <div id="mainbutton">
                   <center> <a href="#">tagboard</a> </center>
                </div> </div> </div>


        <div class="dropdown">

            <div class="menu">
                <div id="itemone"></div>

this is a sample text
this is a sample text
this is a sample text
this is a sample text
this is a sample text

    <br></div></div>

这是一个示例文本
这是一个示例文本
这是一个示例文本
这是一个示例文本
这是一个示例文本


这是一个示例文本
这是一个示例文本
这是一个示例文本
这是一个示例文本
这是一个示例文本

PS:JSFIDLE不会让我生成。如果事情搞砸了，我不知道为什么这么抱歉

无论如何，如果您想看，请点击这里：

非常感谢你

这里有一个例子

---

---

这听起来可能很疯狂，但是……为什么要使用JQuery？为什么不是纯CSS？@LOTUSMS我不知道用纯CSS怎么做对不起，没问题。我看你已经有答案了。但这相当容易，有一段时间，它不会与我的边栏上的其他元素对齐，但我只是做了一些调整，现在它工作得非常好。非常感谢你！

<nav>
  <ul>
    <li>Item 1
      <ul>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
        </li>
      </ul>
    </li>
    <li>Item 2
      <ul>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut tortor vel mi elementum consequat eu quis velit. Vestibulum nec bibendum lacus, sit amet tristique nulla.
        </li>
      </ul>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</nav>

nav {
  width: 250px;
}
ul {
  list-style: none;
}
li {
  background: #ddd;
  width: 100%;
  line-height: 25px;
  margin: 0 0 5px;
  padding: 2px 0;
  text-align: center;
  cursor: pointer;
}
li ul {
display: none;
}
li ul li {
  position: relative;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

(function($) {
  $('ul li').mouseover(function() {
    $('ul',this).stop().slideDown(400, 'linear');
  });
  $('li, li ul').mouseout(function() {
    $('li ul').stop().slideUp(400, 'linear');
  });
})(jQuery);