title: Dropdown Menu Keeps Extending with No Content
body: <p>I have a dropdown menu on my site with 5 items on it. After the fifth item, it keeps extending with the defined background color and goes to the bottom of the page. When I add height to the dropdown menu, it fixes the issue, but obviously, I can't add a height. I just want it to extend to the last item in the list. I have no idea why this is happening.</p>
  
  <p>Tried adding defined height. This worked, and a scroll bar appeared on the side. This isn't a viable solution though unless height is 100% of whatever items are listed.</p>
  
  <p>The menu is "onepress-menu-mobile" in this CSS code:</p>
  
  <pre><code>/* my own editing starts */
  
  div.contact {
      margin-bottom:3vh;
  }
  
  div.contact p {
      text-align:center;
      font-weight:bold;
      font-size:4.5vh;
  }
  
  div.contact p.number,
  div.contact p.number2,
  div.contact p.email {
      margin-bottom:0px;
      line-height:1.4em;
  }
  
  div.contact p.number2 {
      font-size:2vh;
  }
  
  #about, #services, #gallery {
      padding-top:7vh;
      padding-bottom:2vh
  }
  
  #gallery {
      background:white;
  }
  
  div.section-desc {
      text-align: left;
  }
  div.section-desc li {
      margin: 0px 3vh 0px 8vh;
      color: black;
  }
  div.section-desc img {
      border-radius:3px;
      margin:20px auto;
      display:block;
      border:2px solid black;
      padding:1px;
      width:100%;
  }
  
  div.section-desc div.video {
      margin:20px auto;
  }
  
  div.section-desc .lastparagraph {
      font-size:3vh;
      margin:0px 5vh;
  }
  
  #main.site-main p {
      margin-left:3vh;
      margin-right:3vh;
  }
  
  .myself {
      float:left;
      margin:5px 22px 30px 10px;
      width:30vw;
      border:2px solid black;
      border-radius:5px;
  }
  
  div.site-branding {
      margin-left:-25px;
  }
  
  p {
      font-size:18px;
      color:black;
  }
  
  #primary.content-area {
      padding-top:20px;
      padding-bottom:10px;
  }
  
  a.site-text-logo:hover {
      color:#116ebf !important;
  }
  
  ul.onepress-menu a:hover {
      text-shadow: 0px 0px 8px white;
      text-decoration:underline;
      transition: 0s;
      color:white;
  }
  
  ul.onepress-menu {
      color:white;
  }
  
  ul.onepress-menu.onepress-menu-mobile {
      background:black;
      height:100%;
  }
  
  .site-header {
      background: black;
  }
  
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
      background:white;
  }
  
  #nav-toggle.nav-is-visible span,
  #nav-toggle.nav-is-visible span:before, 
  #nav-toggle.nav-is-visible span:after {
      background:white !important;
  }
  
  .aboutme {
      margin-left:39% !important;
  }
  
  .arve-wrapper {
      border: 3px solid black;
  }
  
  #features div.feature-media {
      margin:0px;
      padding:0px;
  }
  #features h4 {
      margin-bottom:30px;
  }
  #features {
      padding:20px 0px 5px 0px;
  }
  
  .hero-large-text {
      font-size:7.2vw !important;
  }
  
  div.hero__content p {
      font-size: 6.8vw;
      margin:0px !important;
      line-height: 7vh;
  }
  
  #hero div.container {
      padding-top:22% !important;
      padding-bottom:3% !important;
  }
  
  div.container {
      width:100%;
      padding-left:25px;
      padding-right:25px;
  }
  </code></pre>