Класс добавлен с помощью javascript, но CSS не применен?

Я собираюсь создать переключаемое меню, используя JavaScript и CSS. Класс .menu-slider добавляется с блоком отображения свойств. Но это не работает, только класс отключен и CSS не применяется. Вот код

<script>
    const toggleMenu = document.querySelector('.toggl-menu');
    document.getElementById("toggleButton").addEventListener("click", function() {
        var button = this;
        toggleMenu.classList.toggle('menu-slider');
        button.classList.toggle("open");
        button.classList.toggle("close");
        var openIcon = button.querySelector(".open-icon");
        var closeIcon = button.querySelector(".close-icon");
        if (button.classList.contains("open")) {
            openIcon.style.display = "inline";
            closeIcon.style.display = "none";
        } else {
            openIcon.style.display = "none";
            closeIcon.style.display = "inline";
        }
    });
</script>

<style>
    .toggl-menu {
        display: none;
        position: absolute;
        padding-top: 1rem;
        padding-bottom: 1rem;
        align-items: center;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        width: 100%;
        background-color: #ffffff;
        left: 0;    
        top: 70px;
    }
    .menu-slier{
        display: block;
        transition-duration: 500ms;
    }
</style>