ボタンを押すメニューに隠した要素が残ってしまう

Question

CSSを用いたボタンを押すと出てくる
ハンバーガーメニューのようなものを
作っています。

大枠のメニュー８項目の中に
その項目を押すとさらにメニューが出てくる仕組みです。
途中までは製作できたのですが、
ボタンを押す前のメニューの状態に
隠している要素の高さが残ってしまっています。

これを解除する方法はありますでしょうか？？？

参照画像も添付しております。

クリック前

クリック後

  <header>
  <div class="container">
<div class="header-wrapper">
  <div class="header-bk">
    <img class="logo-img" src="img/logo-header (2).png">
    <input type="checkbox" id="down-menu">
    <label for="down-menu"><span><img class="menu-img" src="img/menu-sp-btn-copyーcopy.png"></span></label>
    <div class="content-list">
      <div>
      <div id="menu-list">

          <div class="top-list">
            <ul>
        <div class="dot"></div>
<li><a href="#">HOME</a></li>
<div class="dot"></div>
<li><a href="#">サービスコンセプト</a></li>
<div class="dot"></div>

<li>
  <div id="hamburg">
      <input id="input" type="checkbox">
      <label id="label1" for="input"><a>アイテム一覧</a></label>
    <div id="content">
     <ul class="list">
       <li><a>クッションカバー</a></li>
       <li><a>ウッドフレームアート</a></li>
       <li><a>ぬいぐるみ</a></li>
       <li><a>アートパネル</a></li>
       <li><a>デニムバッグ</a></li>
       <li><a>グラフィックアート</a></li>

      </ul>
     </div>
  </div>
</li>

<div class="dot"></div>
<li><a href="#">ご利用ガイド</a></li>
<div class="dot"></div>
<li><a href="#">お客様の声</a></li>
<div class="dot"></div>
<li><a href="#">よくあるご質問</a></li>
<div class="dot"></div>
<li><a href="#">お問い合わせ</a></li>
<div class="dot"></div>
<li><a href="#">その他</a></li>
<div class="dot"></div>
    </ul>
  </div>




</div>
</div>
  </div>
</div>
<div>
</header>

.container {
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
  font-weight: normal;
}

.header-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 75px;
  background-image: url(img/bg-header-s-cp.png);
  background-repeat: repeat;
  z-index: 99;
}

.header-bk {
  background-image: url(img/bg-header-s-cp.png);
  background-repeat: repeat-x;
}

.logo-img {
  width: 200px;
  padding-top: 20px;
  padding-left: 20px;
}

.menu-img {
  width: 50px;
  height: auto;

}



#down-menu {
  display: none;
}


.top-list {
z-index: 90;
}

.top-list a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
  color: #3E89CA;
  font-weight: 600;
}

.top-list a:hover{
  background-color: #EA6684;
  color: #FFFFFF;
}

.top-list img {
margin-left: auto;

}


#menu-list {
  width: 100%;
  height: 700px;
}

#input:checked ~ #menu-list {
}

#menu-list li{

  list-style: none;
  display: block;
}



.dot {
  height: 2px;
  margin: 0px 0 0 0;
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 2px);
  background-size: 5px 1px;
  background-position: top;
  background-repeat: repeat-x;
  }

.content-list {
  background-image: url(img/bg-spnav-01.png);
  background-color: #FFFFFF;
  width: 100%;
}




.list li {
  display: inline-block;
  width: 50%;
  float: left;
}

#input{
	display: none;
}

#content{
	transform: translateY(-1000px);
}

#input:checked ~ #content{
	transform: translateY(0px);
}

Answer 1

displayプロパティを切り替えればよいのでは。

#content{
  /*transform: translateY(-1000px);*/
  display: none;
}

#input:checked ~ #content{
  /*transform: translateY(0px);*/
  display: block;
}

Answer 2

display:noneと　blockを交互に切り替えるようにしてやれば、消えたりでてきたりします。

#content{
  display: none;
  }
  
#content.active{
   display:block;
 }

<label id="label1" for="input" onclick='document.getElementById("content").classList.toggle("active")'><a>アイテム一覧</a></label>