Как сделать так, чтобы подразделы появлялись в правой части раздела «Комнаты» при наведении курсора на раздел «Комнаты» ⇐ CSS

[Anonymous]

У меня есть боковая панель, которая сдвигается вправо при наведении курсора. Мне нужно, чтобы при наведении курсора на разделы, в которых есть подразделы, справа появлялись подразделы, а также основная боковая панель.

чего я хочу достичь

ссылка на код

Боковое меню [*] .logo{ } .fa-solid { положение: относительное; отображение: таблица-ячейка; ширина: 55 пикселей; выравнивание текста: по центру; верх: 25 пикселей; размер шрифта: 20 пикселей; } .main-menu:hover, nav.main-menu.expanded { ширина: 250 пикселей; переполнение: скрыто; непрозрачность: 1; } .главное меню { фон: #808080; позиция: абсолютная; верх: 0; внизу: 0; высота: 100%; осталось: 0; ширина: 80 пикселей; переполнение: скрыто; -webkit-transition:ширина .2с линейная; переход: ширина .2с линейная; -webkit-transform:translateZ(0) масштаб(1,1); box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07); непрозрачность: 1; } .main-menu li>a { положение: родственник; ширина: 400 пикселей; дисплей: стол; граница-коллапс: коллапс; расстояние между границами: 0; цвет: #ffffff; размер шрифта: 14 пикселей; текстовое оформление: нет; -webkit-transform:translateZ(0) масштаб(1,1); -webkit-transition: все .14 линейные; переход: все .14с линейные; семейство шрифтов: 'Strait', без засечек; } .main-menu .nav-text { положение: родственник; дисплей: таблица-ячейка; вертикальное выравнивание: по середине; ширина: 190 пикселей; высота: 65 пикселей; } навигация { -webkit-user-select: нет; -moz-user-select: нет; -ms-user-select: нет; -o-пользователь-выбрать: нет; выбор пользователя: нет; } нав ул, нав ли { контур: 0; маржа: 0; дополнение: 0; преобразование текста: верхний регистр; } .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active >a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { цвет: #DAA520; текстовая тень: 0 пикселей 0 пикселей 0 пикселей; } .подменю { дисплей: нет; позиция: абсолютная; верх: 0; слева: 100%; фон: #808080; ширина: 200 пикселей; /* или другая ширина по вашему выбору */ } .main-menu li:hover .sub-menu { дисплей: блок; } Меню Основная О программе Номера

• Подменю 1
• Подменю 2

Еда Для детей Услуги Контакты Но мои подразделения отображаются поверх боковой панели