导航栏内的用户菜单下拉菜单
User menu dropdown inside a navbar
顺风顺水，我在让用户菜单下拉菜单正常工作时遇到了一些问题，用户下拉菜单导致整个导航栏随之滚动，而且它的位置也不正确。我该如何正确解决这个问题而不导致整个导航栏随之滚动？
代码段
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data="{ open: false, position: true, profile: false }"
x-bind:class='{ "bg-black shadow-lg": !position }'
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href="{{ route('home') }}" class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">title<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="{'flex fixed': open, 'hidden': !open }">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href="{{ route('home') }}"
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">title<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href="{{ route('home') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('home') ? 'text-indigo-600' : '' }} ">Home</a>
<a href="{{ route('blog') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('blog') ? 'text-indigo-600' : '' }}">Blog</a>
<a href="{{ route('contact') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('contact') ? 'text-indigo-600' : '' }}">Contact</a>
<a href="{{ route('team') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('team') ? 'text-indigo-600' : '' }}">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href="{{ route('login') }}"
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto {{ request()->routeIs('login') ? 'text-indigo-600' : '' }}">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href="{{ route('register') }}"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 {{ request()->routeIs('register') ? 'text-black-700' : '' }}">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="Profile image"/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="{{route('dashboard.index',['user' => Auth()->user()])}}"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="{{route('logout')}}">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data="{ open: false, position: true, profile: false }"
x-bind:class='{ "bg-black shadow-lg": !position }'
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href="{{ route('home') }}" class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">Digendo<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="{'flex fixed': open, 'hidden': !open }">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href="{{ route('home') }}"
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">Digendo<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href="{{ route('home') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('home') ? 'text-indigo-600' : '' }} ">Home</a>
<a href="{{ route('blog') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('blog') ? 'text-indigo-600' : '' }}">Blog</a>
<a href="{{ route('contact') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('contact') ? 'text-indigo-600' : '' }}">Contact</a>
<a href="{{ route('team') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('team') ? 'text-indigo-600' : '' }}">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href="{{ route('login') }}"
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto {{ request()->routeIs('login') ? 'text-indigo-600' : '' }}">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href="{{ route('register') }}"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 {{ request()->routeIs('register') ? 'text-black-700' : '' }}">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="Profile image"/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="{{route('dashboard.index',['user' => Auth()->user()])}}"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="{{route('logout')}}">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
我不太熟悉 tailwind，但我认为您应该删除下拉菜单所在容器上的 .overflow-hidden 和 .md\:overflow-auto 类。这些溢出值阻止下拉列表显示在 div 元素之外。
这个容器：
<div class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
需要 overflow:visible 下拉菜单才能工作
顺风顺水，我在让用户菜单下拉菜单正常工作时遇到了一些问题，用户下拉菜单导致整个导航栏随之滚动，而且它的位置也不正确。我该如何正确解决这个问题而不导致整个导航栏随之滚动？
代码段
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data="{ open: false, position: true, profile: false }"
x-bind:class='{ "bg-black shadow-lg": !position }'
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href="{{ route('home') }}" class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">title<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="{'flex fixed': open, 'hidden': !open }">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href="{{ route('home') }}"
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">title<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href="{{ route('home') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('home') ? 'text-indigo-600' : '' }} ">Home</a>
<a href="{{ route('blog') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('blog') ? 'text-indigo-600' : '' }}">Blog</a>
<a href="{{ route('contact') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('contact') ? 'text-indigo-600' : '' }}">Contact</a>
<a href="{{ route('team') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('team') ? 'text-indigo-600' : '' }}">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href="{{ route('login') }}"
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto {{ request()->routeIs('login') ? 'text-indigo-600' : '' }}">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href="{{ route('register') }}"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 {{ request()->routeIs('register') ? 'text-black-700' : '' }}">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="Profile image"/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="{{route('dashboard.index',['user' => Auth()->user()])}}"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="{{route('logout')}}">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data="{ open: false, position: true, profile: false }"
x-bind:class='{ "bg-black shadow-lg": !position }'
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href="{{ route('home') }}" class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">Digendo<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="{'flex fixed': open, 'hidden': !open }">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href="{{ route('home') }}"
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">Digendo<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href="{{ route('home') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('home') ? 'text-indigo-600' : '' }} ">Home</a>
<a href="{{ route('blog') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('blog') ? 'text-indigo-600' : '' }}">Blog</a>
<a href="{{ route('contact') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('contact') ? 'text-indigo-600' : '' }}">Contact</a>
<a href="{{ route('team') }}"
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center {{ request()->routeIs('team') ? 'text-indigo-600' : '' }}">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href="{{ route('login') }}"
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto {{ request()->routeIs('login') ? 'text-indigo-600' : '' }}">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href="{{ route('register') }}"
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 {{ request()->routeIs('register') ? 'text-black-700' : '' }}">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="Profile image"/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="{{route('dashboard.index',['user' => Auth()->user()])}}"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="{{route('logout')}}">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
我不太熟悉 tailwind，但我认为您应该删除下拉菜单所在容器上的 .overflow-hidden 和 .md\:overflow-auto 类。这些溢出值阻止下拉列表显示在 div 元素之外。
这个容器：
<div class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
需要 overflow:visible 下拉菜单才能工作