jquery - .slideDown() 子菜单效果不会将其下方的主菜单下推

Question

在为我的导航栏创建一个 slideDown 子菜单后，我终于能够完成我想要的效果。但是当我将完成的代码插入到我的主代码中时(因为我最初在 codepen 上只使用一个选项卡测试/创建它)并且子菜单向下滑动到主 li 的顶部显示子菜单。我还注意到，如果我点击不同的 li(在主导航上)，它不会隐藏菜单。

这是我对整个侧边导航栏的代码笔:http://codepen.io/PorototypeX/pen/swvtc

有些人在不同的问题上我也要求在这里发布代码，如果您觉得它有点冗长，我们深表歉意。

HTML:

 <div class="backing">

  <ul class="navbar" id="topnav">
    <li class="active">

       <a>HOME</a>

      <!-- Below this is the code for the submenu. For now I just put in example names for testing. eventually I will have a submenu for each li after I get this working on the first li -->

       <ul class="menu-home">
         <li><a href="#"><span>Home</span></a></li>
         <li><a href="#"><span>About</span></a></li>
         <li><a href="#"><span>Info</span></a></li>
       </ul>
    </li>
    <li>

       <a>OUR CHAPTER</a>

    </li>
    <li>

       <a>ABOUT US</a>

    </li>
    <li>

        <a>DESIGN BRIEF</a>

    </li>
    <li>

        <a>MEMBERS</a>

    </li>
    <li>

        <a>EVENTS</a>

    </li>
    <li>

        <a>COMPETITIONS</a>

    </li>
    <li>

        <a>CONTACT INFO</a>

    </li>
    <li>

        <a>JOIN US</a>

    </li>
  </ul>

  <!-- --------------------------------------------------------------------------------------- -->

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

CSS:

           * {
               box-sizing: border-box;
               -moz-box-sizing: border-box;
            }
           .backing {
               transition: all 0.3s linear;
               -webkit-transition: all 0.3s linear;
           }
           .navbar {
                padding: 0;
                margin: 0;
                width: 100%;
                display: inline;
                list-style-type: none;
                position: relative;
                top: 86.62px;
                text-align: center;
            }
            .navbar > li {
                 background: #3F4A4F;
                 height: 50px;
                 border-top: 1px solid #8A8A94;
                 border-bottom: 1px solid black;
            }
            .navbar a {
                 color: #EDEDED;
                 font-family: 'Open Sans', sans-serif;
                 font-size: 140%;
                 width: 100%;
                 height: 100%;
                 line-height: 50px;
                 display: block;
                 outline: 0;
                 letter-spacing: 1px;
                 cursor: pointer;
                 transition: all 0.3s linear;
                 -webkit-transition: all 0.3s linear;
                 border-left: 5px solid transparent;
            }
            li.active a {
                color: #EC6E00;
                border-left: 5px solid #EC6E00;
                background-color: #323C40;
                outline: 0;
            }
            .navbar > li:not(.active):hover a {
                color: #FAFAFA;
                border-left: 5px solid #FAFAFA;
                background-color: #323C40;
            }
    /*The background/container for the entire navigation section. I would like to possibly see if the height of this can also expand to the given height of the submenu when they drop down. but thats obviously not the main issue currently*/
           div.backing {
               background-color: #687C85;
               margin: 0;
               padding: 0;
               height: 576.62px;
               width: 262.5px;
               display: block;
               position: absolute;
               box-shadow: 4px 4px 20px black;
           }

ul[class^="menu"] {
  list-style-type: none;
  padding: 0;
}
ul[class^="menu"] a {
  color: white;
  background-color: #51595C;
  position: relative;
  text-decoration: none;
  line-height: 35px;
  font-size: 110%;
  display: block;
  border-left: 5px solid #0055BA;
  z-index: 1;
}
ul[class^="menu"] a:before {
  content: "";
  background-color: #0055BA;
  position: absolute;
  left: 0px;
  height: 35px;
  width: 0px;
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  z-index: -1;
}
ul[class^="menu"] a:hover:before {
  width: 100%;
}
ul[class^="menu"] a:hover span {
  color: white;
  transition-delay: 0.09s;
  z-index: 1;
}
ul[class^="menu"] span {
  z-index: 3;
}
ul[class^="menu"] {
  display: none;
}

JQuery:

$(document).ready(function(){
  //Code so that when a link is clicked from the main nav it will slide down/slide up the submenu
  $("#topnav a").click(function(){
    $(this).next().slideUp();

    if(!$(this).next().is(":visible"))
    {
      $(this).next().slideDown();
    }
  });

  //This is so that when you click on other li in the #topnav menu, it will switch it to the "active" class which will slide down the submenu (since it was clicked on) and slide up if clicked again
  $("ul.navbar > li").click(function () {              $(this).siblings().removeClass('active');
     $(this).addClass('active');
  });
});

Answer 1

把.navbar>li上固定的height: 50px去掉就解决了，或者改成min-height。

这让我感到困惑，因为它在视觉上看起来像子菜单是 position: absolute - 但它确实与 z-indexing 相关。 li 的内容已包含在内，因此会溢出，但 z 索引会使其显示在其他列表项之上。

http://codepen.io/anon/pen/lefLw