如何创建在英雄内容顶部下拉的响应式菜单 (Tailwind CSS...)

Question

我正在一个网站上工作（我第一次使用 tailwind CSS），我为导航栏抓取并调整了一些代码。

在此处实时查看：-- 已编辑

桌面上的导航栏对我来说很棒，移动设备上的下拉菜单除了我想让菜单下拉到英雄内容的顶部而不是向下推。

自从我写 CSS 以来已经有一段时间了，但我认为部分问题可能与我在当前版本中使用 flexbox 的方式有关。我的记忆让我觉得我必须对 position: absolute & position: relative 做一些调整，但我不知道我需要在这里做什么：/

任何ideas/suggestions？

Answer 1

您需要将 sub-menu CSS 设置为绝对定位，这样它就不会影响页面上的任何内容并使其父级处于相对位置。

CSS

nav{
    position:relative;
}

#nav-content{
    position:absolute;
    top:58px; /*Your navigation height*/
    background-color:#FFF;
    left:0px;        
}

希望对您有所帮助。

如何创建在英雄内容顶部下拉的响应式菜单 (Tailwind CSS...)

How to create responsive menu that drops-down on TOP of hero content (Tailwind CSS...)

css

responsive-design

tailwind-css