/* Главное меню */
.menu {
    outline:0px solid red;
    background: #0b3c6d;
    position: relative;
    width: 40%;
    margin: 0 auto;
    float: none;
    /*
    outline:10px solid red;
    clear: both;
    float: none;
    display: block;*/
}

/* Reset list */
.menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

/* Main menu as flex + centered */
.menu > ul {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Элементы меню */
.menu li {
    position: relative;
    padding: 0px 0px;
}

.menu a {
    display: block;
    padding: 15px 25px;
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.menu a:hover {
    background: #145da0;
}

/* Подменю */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #145da0;
    display: none;
    min-width: 200px;
    z-index: 1000;
}

/* Третий уровень */
.submenu .submenu {
    top: 0;
    left: 100%;
}

/* Показывать подменю при наведении */
.menu li:hover > .submenu {
    display: block;
}

/* Элементы подменю */
.submenu li {
    width: 100%;
}

/* Анимация */
.submenu {
    animation: dropdown 0.25s ease;
}

@keyframes dropdown {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стрелки у пунктов с подменю */
.menu li > .submenu {
    border-top: 1px solid rgba(255,255,255,0.2);
    background-color: green;
}

/* Стрелка вниз (для первого уровня) */
.menu > ul > li:has(.submenu) > a::after {
    content: " ▼";
    font-size: 12px;
}

/* Стрелка вправо (для подменю) */
.submenu li:has(.submenu) > a::after {
    content: " ▶";
    float: right;
}

/* Небольшой отступ для стрелки */
.menu a::after {
    margin-left: 6px;
}

.menu::after {
    content: "";
    display: table;
    clear: both;
}



@media (max-width: 768px) {

    .menu > ul {
        flex-direction: column;
    }

    .menu a {
        white-space: normal;   /* allow text wrap */
    }

}