JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<nav class="main-nav">
    <ul>
        <li><a href="#">Услуги</a>
            <div class="dropdown-menu">
                <div class="menu-column left-column">
                    <ul>
                        <li class="menu-item active">
                            <a href="#" data-category="laser">Лазерная эпиляция</a>
                            <span class="arrow">></span>
                            <!-- 3-й уровень меню -->
                            <ul class="submenu">
                                <li><a href="#">Женская лазерная эпиляция на Mediostar</a></li>
                                <li><a href="#">Мужская лазерная эпиляция на Mediostar</a></li>
                                <li><a href="#">Комплексы эпиляции (Primelase)</a></li>
                                <li><a href="#">Удаление волос на лице</a></li>
                                <li><a href="#">Удаление волос на теле</a></li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="#" data-category="cosmetology">Аппаратная косметология</a>
                            <span class="arrow">></span>
                            <ul class="submenu">
                                <li><a href="#">Чистка лица</a></li>
                                <li><a href="#">Массаж лица</a></li>
                                <li><a href="#">Процедуры для тела</a></li>
                                <!-- Дополнительные пункты для демонстрации скролла -->
                                <li><a href="#">Пилинг</a></li>
                                <li><a href="#">Ультразвуковая терапия</a></li>
                                <li><a href="#">Микротоковая терапия</a></li>
                                <li><a href="#">RF-лифтинг</a></li>
                                <li><a href="#">Фракционное омоложение</a></li>
                            </ul>
                      ...

CSS

/* ... (весь CSS из предыдущего ответа остается) ... */

/* !!! Важно: сделать родительский LI элементом позиционирования для 3-го уровня !!! */
.menu-item {
    position: relative; /* Делаем LI родительским контейнером для абсолютного позиционирования */
    display: flex; /* Остается для a и arrow */
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Стили для 3-го уровня меню (submenu) */
.submenu {
    display: none; /* Скрыто по умолчанию */
    position: absolute;
    top: 0; /* Выравнивание по верхнему краю родительского LI */
    left: 100%; /* Появляется справа от родительского LI */
    min-width: 250px; /* Минимальная ширина 3-го уровня */
    background-color: #fcfcfc; /* Фон 3-го уровня */
    border: 1px solid #ddd;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    z-index: 1001; /* Выше, чем основной dropdown-menu, чтобы быть поверх всего */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    max-height: 300px; /* Если 3-й уровень тоже очень длинный, можно добавить скролл */
    overflow-y: auto;
    overflow-x: hidden;
}

.submenu li a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* Предотвращает перенос текста */
    transition: background-color 0.2s ease;
}

.submenu li a:hover {
    background-color: #e9e9e9; /* Ховер для пунктов 3-го уровня */
}

/* Отображение 3-го уровня при наведении на элемент 2-го уровня */
.menu-item:hover > .submenu {
    display: block; /* Показываем 3-й уровень при наведении на соответствующий LI */
}

/* Если вы хотите более плавное появление, можно использовать opacity/visibility вместо display */
/*
.submenu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    // ... остальной CSS для...