/* Стили для пункта меню с подменю */
.t-menu__item_has_submenu {
    position: relative;
}

/* Стили для подменю */
.t-menu__submenu {
    position: absolute;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    min-width: 200px;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.t-menu__submenu_hidden {
    display: none;
}


.t-menu__item_has_submenu:hover .t-menu__submenu {
    display: block;
}

.t-menu__submenu li {
    padding: 8px 15px !important;
    display: block !important;
    flex-direction: column;
}

.t-menu__submenu li a {
    display: block;
    color: #333;
    text-decoration: none;
}

.t-menu__submenu li a:hover {
    background-color: #f0f0f0;
}

@media (max-width: 768px) {
    .t228__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .t-menu__item_has_submenu {
        position: relative;
    }


    .t-menu__item_has_submenu a {
        display: block;
        width: 100%;
    }

    .t-menu__submenu {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        display: none;
        width: 100%;
        background-color: #f8f8f8;
        border: none;
        padding: 0;
        min-width: auto;
        z-index: 1;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* Класс, который будет добавляться/удаляться с помощью JS для показа подменю */
    .t-menu__submenu_visible {
        display: block !important; /* !important для переопределения display: none */
    }

    /* Стили для пунктов подменю */
    .t-menu__submenu li {
        padding: 10px 15px; /* Немного больше отступы для удобства нажатия */
        border-bottom: 1px solid #eee; /* Разделитель между пунктами подменю */
    }

    .t-menu__submenu li:last-child {
        border-bottom: none; /* Убираем разделитель у последнего пункта */
    }

    .t-menu__submenu li a {
        display: block; /* Ссылка занимает всю ширину li */
        color: #555; /* Цвет текста ссылки в подменю */
        text-decoration: none;
        font-size: 16px; /* Увеличиваем шрифт для удобства */
        padding: 0; /* Убираем padding, если есть */
    }

    .t-menu__submenu li a:hover {
        background-color: transparent; /* Фон при наведении в подменю, если не нужен */
    }

    /* Если вы используете JS, можно добавить класс на сам родительский li для индикатора */
    .t-menu__item_has_submenu.t-menu__item_open > a::after {
        /* Здесь можно было бы поставить стрелку вверх, если бы мы ее использовали */
        /* content: "\f106"; */
    }
}