悬停时的Jquery slideDown菜单

Question

好的，所以我一直在尝试制作一个在悬停时会有一个向下滑动的框的导航，我发现了这个：Keep Jquery slideDown menu open when hovering over that menu?

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

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

到目前为止，这是我的代码。我真的很讨厌这个，我不知道 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：jsfiddle 不会让我生成。我不知道如果它搞砸了为什么这么抱歉。

无论如何，如果你想看的话就在这里：http://sdmkn.blogspot.com/

非常感谢！！

Answer 1

这是一个例子 FIDDLE

<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);