css - 如何创建在英雄内容顶部下拉的响应式菜单（Tailwind CSS ...）

Question

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

在这里查看它：-已编辑

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

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

有什么想法/建议吗？

Answer 1

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

CSS

nav{
    position:relative;
}

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

希望这可以帮助。