导航栏内的用户菜单下拉菜单

User menu dropdown inside a navbar

顺风顺水,我在让用户菜单下拉菜单正常工作时遇到了一些问题,用户下拉菜单导致整个导航栏随之滚动,而且它的位置也不正确。我该如何正确解决这个问题而不导致整个导航栏随之滚动?

Codepen

代码段


<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 下拉菜单才能工作