如何使我的汉堡包菜单在展开时完全可见，而不按下我的旋转木马图像滑块？

<button id="menu-button">菜单</button>
<nav id="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

#menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #f1f1f1;
  transition: height 0.3s ease;
}

#menu.expanded {
  height: 200px; /* 菜单展开后的高度 */
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu ul li {
  padding: 10px;
}

#menu ul li a {
  text-decoration: none;
  color: #333;
}

#menu-button {
  display: none; /* 在较小屏幕上隐藏菜单按钮 */
}

@media screen and (max-width: 768px) {
  #menu-button {
    display: block; /* 在较小屏幕上显示菜单按钮 */
  }
  
  #menu {
    position: static;
    height: auto;
  }
  
  #menu.expanded {
    height: auto;
  }
}

var menuButton = document.getElementById('menu-button');
var menu = document.getElementById('menu');

menuButton.addEventListener('click', function() {
  menu.classList.toggle('expanded');
});