Как создать выпадающее меню при нажатии? [требует правки]

var nav = document.getElementById('nav'); 
nav.addEventListener('click', function(e) { 
    var target = e.target; 
     
    var targetParent = target.closest('.menu-item'); 
     
    if (targetParent) { 
        var subm = targetParent.getElementsByClassName('submenu')[0]; 
        close(); 
        if (subm) { 
            subm.style.display = 'block'; 
        }  
    } 
}); 
function close() { 
    var s = document.getElementsByClassName('submenu'); 
    for (var i = 0; i < s.length; i++) { 
        s[i].style.display = 'none';         
    } 
}

#nav { 
    padding: 20px 0; 
} 
ul { 
    list-style: none; 
} 
a { 
    text-decoration: none; 
} 
.menu li a { 
    display: block; 
    padding: 10px 30px; 
} 
.menu li { 
    background-color: #ddd; 
} 
.menu-item { 
    margin-right: 2px; 
    position: relative; 
} 
.menu { 
    display: flex; 
} 
.submenu { 
    position: absolute; 
    display: none; 
} 
.submenu-item { 
    margin-top: 1px; 
}

  <nav id="nav"> 
    <ul class="menu"> 
      <li class="menu-item"><a href="#">item1</a></li> 
      <li class="menu-item"><a href="#">item2</a> 
        <ul class="submenu"> 
          <li class="submenu-item"><a href="#">item2_1</a></li> 
          <li class="submenu-item"><a href="#">item2_2</a></li> 
          <li class="submenu-item"><a href="#">item2_3</a></li> 
        </ul> 
      </li> 
      <li class="menu-item"><a href="#">item3</a> 
        <ul class="submenu"> 
          <li class="submenu-item"><a href="#">item3_1</a></li> 
          <li class="submenu-item"><a href="#">item3_2</a></li> 
          <li class="submenu-item"><a href="#">item3_3</a> 
            <!-- <ul class="submenu-level2"> 
              <li class="submenu-item"><a href="#">item4_1</a></li> 
              <li class="submenu-item"><a href="#">item4_2</a></li> 
              <li class="submenu-item"><a href="#">item4_3</a></li> 
            </ul> --> 
          </li> 
        </ul> 
      </li> 
      <li class="menu-item"><a href="#">item4</a></li> 
    </ul> 
  </nav>