HTML CODES:

<nav class="menu">
    <a href="#"><button><i class="fi fi-rr-home"></i> Anasayfa</button></a>
    <div class="dropdownmenu">
        <button class="opener">Biz kimiz ? <i class="fi fi-sr-caret-down"></i></button>
        <div class="dropdownmenu-children">
            <a href="#">Hakkımızda</a>
            <a href="#">Takımımız</a>
        </div>                
    </div>
    <a href="#"><button>Çalışmalarımız</button></a>
    <div class="dropdownmenu">
        <button class="opener">Randevu Al <i class="fi fi-sr-caret-down"></i></button>
        <div class="dropdownmenu-children">
            <a href="#">Hakkımızda</a>
            <a href="#">Takımımız</a>
        </div>                
    </div>
</nav>

Javascript CODES:

const dropdownmenu = document.querySelectorAll(".dropdownmenu")

    dropdownmenu.forEach(element => {
    
        const button = document.querySelector(".opener")
        const submenu = document.querySelector(".dropdownmenu-children")
    
        button.addEventListener("mouseover",()=>{
    
            submenu.classList.add("active")
        })
        
        element.addEventListener("mouseleave",()=>{
        
            submenu.classList.remove("active")
        })
        
    });

With these codes, i can open "Biz kimiz ?" menu but i can't open "Randevu Al" menu. How can i prepare this property ? Could you please help me about this my problem ?