dropdown не попадает в зону видимости экрана( выходит за его пределы)

Как сделать так чтоб каждый новый .dropdown-menu.dropdown-menu-end понимал что открывается в видимой зоне экрана, и если не попадает в ее то выводит элемент так чтоб все равно открывался в видимой зоне?

<ul class="dropdown-menu dropdown-menu-end">
    <li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-435 header__item"><a href="http://localhost/eyebrows/" class="dropdown-item ">Eyebrows</a></li>
    <li id="menu-item-436" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-436 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/mens-haircuts/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Men’s haircuts</a></div>
    <ul class="dropdown-menu dropdown-menu-end">
        <li id="menu-item-437" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-437 header__item"><a href="http://localhost/nail-service/" class="dropdown-item ">Nail service</a></li>
        <li id="menu-item-438" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-438 header__item"><a href="http://localhost/masters/" class="dropdown-item ">Our Masters</a></li>
    </ul>
</li>
    <li id="menu-item-439" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-439 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/permanent-makeup/" class="dropdown-item dropdown-toggle dropdown-menu-end" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Permanent makeup</a></div>
    <ul class="dropdown-menu dropdown-menu-end">
        <li id="menu-item-440" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-440 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/reviews/" class="dropdown-item dropdown-toggle dropdown-menu-end" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Reviews</a></div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-441 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/sample-page/" class="dropdown-item dropdown-toggle dropdown-menu-end" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Sample Page</a></div>
            <ul class="dropdown-menu dropdown-menu-end">
                <li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442 header__item"><a href="http://localhost/stock/" class="dropdown-item ">Stock</a></li>
                <li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443 header__item"><a href="http://localhost/thank-you/" class="dropdown-item ">Thank you</a></li>
                <li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-444 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/theme-options/" class="dropdown-item dropdown-toggle dropdown-menu-end" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Theme Options</a></div>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li id="menu-item-445" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-445 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/womens-haircuts-coloring-hairstyles/" class="dropdown-item dropdown-toggle dropdown-menu-end" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Women’s haircuts / coloring / hairstyles</a></div>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-450 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/sample-page/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Sample Page</a></div>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-451 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/theme-options/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Theme Options</a></div>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-452 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/theme-options/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Theme Options</a></div>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453 header__item"><a href="http://localhost/reviews/" class="dropdown-item ">Reviews</a></li>
                                    <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454 header__item"><a href="http://localhost/thank-you/" class="dropdown-item ">Thank you</a></li>
                                    <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-455 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/permanent-makeup/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Permanent makeup</a></div>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li id="menu-item-456" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-456 header__item dropstart"><div class="menu-item-wrapper"><button class="submenu-toggle" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside"><span class="submenu-toggle-icon"></span></button><a href="http://localhost/eyebrows/" class="dropdown-item dropdown-toggle " data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Eyebrows</a></div>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457 header__item"><a href="http://localhost/womens-haircuts-coloring-hairstyles/" class="dropdown-item ">Women’s haircuts / coloring / hairstyles</a></li>
                                            <li id="menu-item-458" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458 header__item"><a href="http://localhost/mens-haircuts/" class="dropdown-item ">Men’s haircuts</a></li>
                                            <li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459 header__item"><a href="http://localhost/nail-service/" class="dropdown-item ">Nail service</a></li>
                                        </ul>
</li>
                                    </ul>
</li>
                                </ul>
</li>
                            </ul>
</li>
                        </ul>
</li>
                    </ul>
</li>
                </ul>
</li>
            </ul>
</li>
        </ul>
</li>
    </ul>
</li>
</ul>