ハンバーガーメニューのリストが表示されない

  <div class="hamburger-nav">
    <div id="nav">
      <ul>
        <li><a href="#">企業理念</a></li>
        <li><a href="#">施工事例</a></li>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </div>
    <div id="hamburger">
      <span class="inner_line" id="line1"></span>
      <span class="inner_line" id="line2"></span>
      <span class="inner_line" id="line3"></span>
    </div>
 </div>

<script>
      function hamburger() {
        document.getElementById("line1").classList.toggle("line_1");
        document.getElementById("line2").classList.toggle("line_2");
        document.getElementById("line3").classList.toggle("line_3");
        document.getElementById("nav").classList.toggle("in");
      };
      document.getElementById("hamburger").addEventListener("click", function() {
        hamburger();
      });
    </script>

#nav {
    position: absolute;
    height: 300px;
    width: 40%;
    right: -40%;
    top: 0;
    transition: 0.7s;
  }
  #nav ul {
    list-style: none;
  }
  #nav ul li {
    border-bottom: 1px solid black;
  }
  #nav ul li a {
    color: #000;
  }
  #hamburger {
    position: absolute;
    top: 30px;
    right: -5px;
    width: 45px;
    height: 16px;
    transition: 0.7s;
    cursor: pointer;
  }
  .inner_line {
    display: block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 1px;
    background-color: #000;
    transition: 0.5s;
    border-radius: 4px;
  }
  #line1 {
    top: 0;
  }
  #line2 {
    top: 8px;
  }
  #line3 {
    bottom: 0;
  }
  .in {
    transform: translateX(-100%);
  }
  .line_1, .line_2, .line_3 {
    background-color: #000;
  }
  .line_1 {
    transform: translateY(8px) rotate(-45deg);
    top: 0;
  }
  .line_2 {
    opacity: 0;
  }
  .line_3 {
    transform: translateY(-8px) rotate(45deg);
    bottom: 0;
  }