Why is sub menu in mobile opening on top of menu instead of it pushing the menu down?

I want my sub menu on mobile view to work like this but instead if you go into mobile view and click services tab it does not open like this. If you remove position: static; in @media only screen and (max-width: 798px)

.nav-dropdown {
    position: static; */
}

it will show the sub menu "web design" but it just sits on top of the menu intead of pushing it down and fitting between like it does in the in the nav I am trying to use from. Here is my code:

<ul class="nav-list">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/#about">About</a>
  </li>
  <li>
    <a href="#!">Services</a>
      <ul class="nav-dropdown">
  <li>
    <a href="/web-design">Web Design</a>
  </li>
  <!--<li>-->
  <!--    <a href="#!">Web Development</a>-->
  <!--</li>-->
  <!--<li>-->
  <!--    <a href="#!">Graphic Design</a>-->
  <!--</li>-->
</ul>

CSS:

@media only screen and (max-width: 798px) {


.nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 50px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

Solution

nav ul li {
height: 50px;
}

gives every li a hard height of 50 pixels if you change this in you mobile media query to:

nav ul li {
height: inherit;
}

it should allow the li to move down as the drop down expands and resolve the issue. Hope this helps.