title: .slideDown() submenu effect wont push down main li underneath it
body: <p>After I messed around with creating a slideDown submenu for my navigation bar, I was able to finally finish the effect that I wanted. but when I plugged in the finished code to my main code (since I originally tested/created it with only one tab on codepen) and the submenu slides down over top of the main <code>li</code> underneath the one clicked to show the submenu. I also noticed that if I clicked on a different li (on the main nav) it wouldn't hide the menu. </p>
  
  <p>Here's my codepen to the entire side navbar: <a href="http://codepen.io/PorototypeX/pen/swvtc" rel="nofollow">http://codepen.io/PorototypeX/pen/swvtc</a></p>
  
  <p>And some people in a different question I asked to post the code here too, so sorry if it's a bit lengthy for your tastes.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="backing"&gt;
  
    &lt;ul class="navbar" id="topnav"&gt;
      &lt;li class="active"&gt;
  
         &lt;a&gt;HOME&lt;/a&gt;
  
        &lt;!-- 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 --&gt;
  
         &lt;ul class="menu-home"&gt;
           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Info&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
  
         &lt;a&gt;OUR CHAPTER&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
         &lt;a&gt;ABOUT US&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;DESIGN BRIEF&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;MEMBERS&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;EVENTS&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;COMPETITIONS&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;CONTACT INFO&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
  
          &lt;a&gt;JOIN US&lt;/a&gt;
  
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- --------------------------------------------------------------------------------------- --&gt;
  
  &lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>           * {
                 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 &gt; 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 &gt; 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;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(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 &gt; li").click(function () {              $(this).siblings().removeClass('active');
       $(this).addClass('active');
    });
  });
  </code></pre>