Запретить элементу absolute переходить за границу relative

Question

Имеется навигация с меню второго уровня. Меню второго уровня установлен класс absolute Но при открытии меню второго уровня, оно выходит за границу родительского блока. Если наводим на кнопку "Аксессуары" - меню отображается нормально, и как надо А вот если наведем на кнопку "Шапки вязаные", меню открывается но вылазит за границу родителя

Как сделать так, что бы подменю если оно справа, максимально упиралось в правую границу родителя, не изменяя свой размер (Размер у подменю всегда 50% от родителя)

.navigation ul li a{
    position: relative;
    font-size: 12px;
    font-weight: 600;
    padding-left: 0;
    color: #21122B;
}
@media (max-width: 1700px){
    .navigation ul li a{
        padding-right: .75rem;
    }    
}

.navigation ul li:hover a{
    color: #D3B94B;
}
.navigation ul li:hover span{
    border-bottom: 2px solid #D3B94B;
}

ul.mega-menu{
    position: relative;
}

ul.mega-menu li{
    position: initial;
}

ul.mega-menu li ul.submenu{
    position: absolute;
    width: 50%;
    background: white;
    border: 1px solid #dee2e6;
    /*top: 100%;*/
    /*left: auto;*/
    /*right: auto;*/
    /*right: 0;*/
    padding: 1.5rem;
    display: none;
}
ul.mega-menu li:hover ul.submenu{
    display: flex;
    flex-wrap: wrap;
}

ul.mega-menu li ul.submenu li a{
    color: #929292;
    font-size: 12px;
    font-weight: 600;
}
ul.mega-menu li ul.submenu li a:hover{
    color: #D3B94B;
}
ul.mega-menu li ul.submenu li a::after{
    display: none;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container py-5 navigation border border-danger">
    <ul class="nav justify-content-between mega-menu border">
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Пряжа</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Инструменты</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Аксессуары</span>
            </a>
            <ul class="nav submenu">
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Помпоны</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Шапки вязаные</span>
            </a>
            <ul class="nav submenu">
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Пряжа на бобинах </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Толстая пряжа </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
                <li class="nav-item col-3"> <a href="" class="nav-link"> Шнуры </a> </li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <span class="ms-2">Снуды и шарфы</span>
            </a>
        </li>
    </ul>
</div>

Так же в редакторе: https://jsfiddle.net/synapse3/o7ygr8ew/

Спасибо

БЛОГ НА HUSL

Запретить элементу absolute переходить за границу relative

Ответы (0 шт):