laravel 如何用下拉式顺风CSS解决内容重叠问题?

igsr9ssn  于 2023-01-10  发布在  其他
关注(0)|答案(1)|浏览(131)

如图所示,导航下拉菜单与正文内容重叠,我该如何解决这个问题?我正在添加导航代码和内容

导航

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

31moq8wy1#

z-index实用程序类或position-relative类添加到. dropdown菜单元素,如下所示:

<ul class="dropdown-menu z-10">
  <!-- dropdown menu items -->
</ul>

相关问题