我的问题如下：我有一个带有两个下拉菜单的导航栏。下拉列表没有覆盖下面的输入字段，这导致无法单击下拉列表中的第一个链接。

我有以下组件：
App.vue

<template>
  <div class="flex flex-col min-h-screen bg-primary">
    <Navbar/>
    <RouterView/>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import Navbar from './components/Navbar.vue';
</script>

<style scoped>
</style>

AusleihView.vue

<template>
    <main class="container text-white">
        <div class="pt-4 mb-8 relative">
            <input type="text" placeholder="Suche User"
            class="py-2 px-1 w-full bg-transparent border-b
             focus:border-b-gray-600 
             focus:outline-none focus:shadow-[0px_1px_0_0_#004E71]"/>
        </div>
    </main>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

Navbar.vue

<template>
    <header class="sticky top-0 shadow-lg">
        <nav class="container flex flex-col sm:flex-row items-center gap-4 py-1">
            <div class="px-2 pt-2 sm:flex">
                <RouterLink :to="{name:'home'}">
                    <p class=" mt-1 block px-2 py-1 font-semibold rounded hover:bg-slate-500">Meine Medien</p>
                </RouterLink>
                <RouterLink :to="{name:'ausleihe'}">
                    <p class="mt-1 block px-2 py-1 font-semibold rounded hover:bg-slate-500">Ausleihe/Rückname</p>
                </RouterLink>
                <InvetoryDropDown />
                <AdminDropDownVue />
            </div>
        </nav>
    </header>
</template>

<script setup lang="ts">
import AdminDropDownVue from './AdminDropDown.vue';
import InvetoryDropDown from './InventoryDropDown.vue'

</script>

vue（AdminDropDown.vue类似）

<template>
    <div class="relative">
        <button @click="isOpen = !isOpen"  class="mt-1 block px-2 py-1 font-semibold rounded hover:bg-slate-500">Inventar</button>
        <button v-if="isOpen" @click="isOpen = false" tabindex="-1" class="fixed bg-black inset-0 h-full w-full opacity-40"></button>
        <div v-if="isOpen" class="absolute left-0 mt-2 py-2 w-48 rounded-lg shadow-xl bg-white">
            <p class="mt-1 block px-2 py-1 font-semibold rounded hover:bg-slate-500">Aufnehmen</p>
            <p class="mt-1 block px-2 py-1 font-semibold rounded hover:bg-slate-500">Entfernen</p>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    data() {
        return {
            isOpen: false,
        }
    },
    created() {
        const handleEscape = (e: KeyboardEvent) => {
            if (e.key === 'Esc' || e.key === 'Escape') {
                this.isOpen = false
            }
        }
        document.addEventListener('keydown', handleEscape)

    }
}
</script>

我需要帮助修复下拉位置，使链接可点击。
谢谢你。