我的下拉菜单在顺风CSS中占据了导航栏背景的整个区域

Question

我用顺风CSS创建了这个下拉菜单，但它占据了导航条背景的整个区域，而不是在上方或至少在悬停时在其外部。我是顺风的新手，并且尝试过在这些有用的实用程序类中浏览文档，但都无济于事。下面是我的代码片段[这是在Hover之前，这是在Hover之后](https://i.stack.imgur.com/qj85E.png)

<!-- Menu NavBar-->
<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div>
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg ">
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>  
</nav>

我尝试添加一个z索引，但它没有工作

Answer 1

您可以通过添加位置类来实现。链接菜单的容器需要absolute类，而它的容器需要relative类，所以它不会完全逃避页面结构。你可以在这里阅读更多关于positioncss属性的信息以及如何使用tailwind中的位置类

<nav class="bg-lightDustyRose p-4">
<div class="container mx-auto">
<div class="hidden space-x-9 md:flex">
<div class="relative"> <--here--<<
<button class="peer text-white hover:text-gray-500">Home</button>
<div class="absolute hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg "> <--here--<<
<a class="px-5 py-3 hover:bg-gray-200" href="#">About Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Contact Us</a>
<a class="px-5 py-3 hover:bg-gray-200" href="#">Privacy Policy</a>
</div>
</div>
</div>
</div>  
</nav>