Css 引导子菜单宽度100

我想打开100%宽度的子菜单（ul），如图所示。但它总是在下拉宽度中打开

<li class="nav-item  drop-menu"> <a class="nav-link" href="#">Ürünler & Kataloglar</a> <ul style="position:relative;display:inline-block;width:100%;z-index:888;background-color:white;">
        <li ><a href="#">Rich</a></li>
        <li><a href="#">Shay</a></li>
        <li><a href="#">Jose</a></li>
        <li><a href="#">Marie</a></li>
        <li><a href="#">Simon</a></li>
        <li><a href="#">Jamie</a></li>
        <li><a href="#">Andrew</a></li>
        <li><a href="#">Teddie</a></li></ul></li>

使用百分比设置宽度时，始终根据父元素（下拉宽度）进行设置。要实现全屏幕宽度，您可以

• 将下拉列表设置为100%宽度
• 将子菜单设置为像素宽度

不起作用。您可能需要发布更多的代码。我猜第一个

列在

元素中，对吗？我添加了所有代码。我想打开下拉部分的全宽。

<div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="nav navbar-nav mx-auto">
                            <li class="nav-item"> 
                                <a class="nav-link" href="#">Kurumsal</a>
                            </li>
                            <li class="nav-item  drop-menu" >
                                <a class="nav-link" href="#"  >Ürünler & Kataloglar</a>
        <ul style="position:absolute;display:inline-block;width:100% ;background-color:white;">
        <li ><a href="#">Rich</a></li>
        <li><a href="#">Shay</a></li>
        <li><a href="#">Jose</a></li>
        <li><a href="#">Marie</a></li>
        <li><a href="#">Simon</a></li>
        <li><a href="#">Jamie</a></li>
        <li><a href="#">Andrew</a></li>
        <li><a href="#">Teddie</a></li>
        </ul>  
                            </li>
                            <li class="nav-item" > 
                                <a class="nav-link" href="#">Satış & Servis</a> 


                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Ar-Ge</a>
                            </li>
                            <li class="nav-item drop-menu">
                                <a class="nav-link" href="#">Haberler</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">İletişim</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#"><i class="fa fa-search header-search"></i></a>

                                <!-- When 767px -->
                                <input type="search" placeholder="Ne Aramıştınız?" class="new-search">
                            </li>
                        </ul>
                    </div>