Question

我要打开子菜单（ul）宽度100％。但它总是以下拉宽度打开。

<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>

Answer 1

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

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

Answer 2

<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>

bootstrap子菜单宽度100

2 个答案: