引导子菜单宽度 100

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>