Why is my event listner so slow and glitchy?

im pretty new to full stack development and im making a hover drop down. im not sure why but when there is nothing but the dropdown portion it works very fast but when i add the rest of the page its operation is super slow and glitchy. im not sure if this is because im using event listners or if the programming is so bad that its hurting performance. it really doesnt seem like it should be an intensive process.

• im running the site through live server
• all vanilla JS
• drop down has two classes, dropdown(when its minimised) and dropdown–active(when content is being displayed)

const servicesBtn = document.querySelector('.header__btn__services');
const dropdown = document.querySelector('.dropdown');
const dropdownItems = Array.from(document.querySelectorAll('.dropdown__item')); //select all elements that are apart of the dropdown
let delayTimeout;
let isMouseOverDropDown;

//monitors to see if the mouse is over JUST the services button
servicesBtn.addEventListener('mouseover', () => {
    clearTimeout(delayTimeout);
    dropdown.classList.add('dropdown--active');
    servicesBtn.innerHTML = 'SERVICES&#11165';
});

//monitors to see if the mouse is over the dropdown menu or any of the elements marked as dropdown items
//if the mouse is over an item isMouseOverDropDown is set to true
//it searches the array of elements marked as dropdown items to see if any match the event.target
//if isMouseOverDropDown is false then the dropdown menu is removed
document.addEventListener('mouseover', (event) => {

    isMouseOverDropDown = dropdownItems.some(item => event.target === item);

    if (!isMouseOverDropDown) {
        clearTimeout(delayTimeout);
        delayTimeout = setTimeout(() => {
            removeDropdownActive();
        }, 300);
    } else {
        clearTimeout(delayTimeout);
    }
});

function removeDropdownActive() {
    servicesBtn.innerHTML = 'SERVICES&#11167';
    dropdown.classList.remove('dropdown--active');
}