How to show dropdown elements with JS?

function Menu() {
    document.getElementById("phone-nav-bar").classList.toggle("show-nav-bar");
  }

  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.menu-button')) {
      var navBar = document.getElementById("phone-nav-bar");
      if (navBar.classList.contains('show-nav-bar')) {
        navBar.classList.remove('show-nav-bar');
      }
    }
  }

.mobile-phone-nav-bar{
    display:none;
}
.show-nav-bar{
    display: flex;
    flex-direction: column;
}

<div class="menu-toggle">

            <button class="menu-button" onclick="Menu()"><img src="assets/images/menu.png"></button>

            <div class="mobile-phone-nav-bar" id="phone-nav-bar">

                <a class="nav-button" href="index.html">Начало</a>
                
                <div class="train-dropdown">
                    
                    <button onclick="TrainDropdown()" class="dropdown-button">Влакове</button>
                    
                    <div id="trains" class="train-elements">
                    
                        <a id="first-element" href="#">Link 1</a>
                        
                        <a href="#">Link 2</a>
    
                        <a id="last-element" href="#">Link 3</a>
                    
                    </div>

                </div> 
                
                <a class="nav-button" href="#contacts">Контакти</a>
                <a class="nav-button" href="#aboutme">Повече за мен</a>
            
            </div>

        </div>