Can't add more items in dropdown

I made a dropdown but can't add more than three items.

Although if I remove overflow:hidden tag I can add more items but I used this tag to remove bullets and for the dropdown to open and close.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.slide {
  clear: both;
  width: 100%;
  height: 0px;
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  transition: height .4s ease;
}
 .slide li {padding : 20px;}

 #touch {position: absolute; opacity: 0; height: 0;}
 #touch:checked + .slide {height: 200px;}

<!-- language: lang-html -->

<ul class="slide">
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
</ul>

<!-- end snippet -->

Sum the line-height (default ~1.2 x font-size) and padding (x2 for top/bottom) of your li elements.

You will see that only three li will fit in .slide { height: 200px }

=> 1.2 * 16px * 3 + 40px * 3 = 177.6px. Adding top padding 20px for the fourth li, totalling 197.6, which yields just enough room for three li and a few pixels of the fourth.

• Room needed per li: 16px(font-size) * 1.2(line-height) + ~3px (inline spacing) + 2 * 20px(top/bottom padding) = ~62px. (Firefox DevTools reports li.height: 22px without padding, which proves the calc).

• Total minimum height of a .slide = 5 * 62px = 310px.

Without animation requirements, it would be best to use height: auto when touch gets clicked...

Add * { outline: 1px dashed } to you CSS and you will see it happen.

snippet without the <input id="touch">

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* { outline: 1px dashed }

.slide {
  clear: both;
  width: 100%;
  height: 200px;
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  transition: height .4s ease;
}

.slide li {
  padding: 20px
}

.slide.test1 { height: 310px }
.slide.test2 { height: auto }

<!-- language: lang-html -->

<h3>original: 200px</h3>
<ul class="slide">
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
</ul>
<br>
<h3>height: 310px</h3>
<ul class="slide test1">
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
</ul>
<br>
<h3>height: auto</h3>
<ul class="slide test2">
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
</ul>

<!-- end snippet -->