I'm trying to create a nested sidebar menu for mobile.
When I click on the `span.big` I want the next ul to become visible.
So I call `.next()`.
Now the nested ul does show, however the problem is that the li below the doesn't move down under it, meaning that the ul is overlapping the li.

```
(function($) {
  $('.big').click(function() {
    $(this).next();
  });
})(jQuery);

```

How can i make the li move down correctly?

```js
    (function($) {

      $('.big').click(function() {
        $(this).next();
      });

    })(jQuery);
```

```css
#cssmenu {
  background-color: #333333;
  height: 100%;
  font-family: Arvo, serif;
  font-size: 17px;
  font-weight: normal;
  color: white;
}
#cssmenu ul {
  list-style: none;
  padding-left: 0;
}
#cssmenu li {
  height: 50px;
}
#cssmenu ul>li {
  padding-top: 13px;
  border-bottom: 1px solid rgba(120, 120, 120, 0.2)
}
#cssmenu ul>li>a {
  color: white;
  margin-left: 15px;
}
#cssmenu ul>li>ul {
  display: none;
}
#cssmenu span.big {
  float: right;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 50px;
  width: 50px;
  margin-top: -13px;
  font-size: 1.5em;
  padding-left: 17px;
  padding-top: 5px;
}
#cssmenu span:hover {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-nav">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class='active'><a href='#'>Products</a>
        <span class="big">+</span>
        <ul>
          <li><a href='#'>Product 1</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
          <li><a href='#'>Product 2</a>
            <ul>
              <li><a href='#'>Sub Product</a>
              </li>
              <li><a href='#'>Sub Product</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>About</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
</div>
```