如图所示,导航下拉菜单与正文内容重叠,我该如何解决这个问题?我正在添加导航代码和内容
导航
<div class="dropdown relative">
<a class="dropdown-toggle flex items-center hidden-arrow" href="#"
id="dropdownMenuButton2" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visible md:invisible md:hidden lg:invisible lg:hidden
py-4 px-2 text-black">
logo
</span>
</a>
<ul class=" dropdown-menu min-w-max absolute hidden bg-white text-base
z-10 float-left py-2 list-none text-left rounded-lg shadow-lg mt-1
hidden m-0 bg-clip-padding left-auto right-0" aria-
labelledby="dropdownMenuButton2">
<li>
<a class="dropdown-item text-sm py-2 px-4 font-normal
block w-full whitespace-nowrap
bg-transparent text-gray-700 hover:bg-gray-100"
href="{{route('home')}}">Home</a>
</li>
<li>
<a class="dropdown-item text-sm py-2 px-4 font-normal
block w-full whitespace-nowrap
bg-transparent text-gray-700 hover:bg-gray-100"
href="{{route('contactUs')}}">Contact Us</a>
</li>
</ul>
</div>
为了更好的说明,我在这里添加了 accordion 代码
<div class="accordion accordion-flush font-pop" id="accordionFlushExample">
@foreach($parentalcare as $key=>$p)
<div class="accordion-item border-t-0 border-l-0 border-r-0 rounded-none bg-white border border-gray-200">
<h2 class="accordion-header mb-0" id="flush-heading{{$key}}">
<button
class="accordion-button relative flex items-center w-full py-4 px-5 text-gray-800 font-bold text-left text-xl bg-white border-0 rounded-none transition focus:outline-none {{($key=='0')?'':'collapsed'}} "
type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{$key}}" aria-expanded="{{($key=='0')?'true':''}}"
aria-controls="flush-collapse{{$key}}">
{{$p['question']}}
</button>
</h2>
<div id="flush-collapse{{$key}}" class="accordion-collapse border-0 collapse {{($key=='0')?'show':''}}"
aria-labelledby="flush-heading{{$key}}" data-bs-parent="#accordionFlushExample">
<div class="accordion-body text-xl py-4 px-5 text-black">
{{$p['answer']}}
</div>
</div>
</div>
@endforeach
</div>
1条答案
按热度按时间31moq8wy1#
将
z-index
实用程序类或position-relative
类添加到. dropdown菜单元素,如下所示: