如何设置响应式导航栏，下拉网站内容？答案

【问题标题】：How to set responsive navigation bar that dropdown over the site content?如何设置响应式导航栏，下拉网站内容？
【发布时间】：2021-03-28 09:36:49
【问题描述】：

我创建了一个导航栏。当我在移动设备上打开它时，我希望它在网站内容上方以透明背景打开，而不是将网站内容向下推，这怎么可能使用 html、css 和 js（没有引导程序）？

【问题讨论】：

标签： html css navigation responsive

【解决方案1】：

    body{
      padding: 0;
      margin: 0;
      }
    #navbar {
      position: fixed;
      width: 100%;
      z-index: 1;
      background-color: black;
    }

    @media screen and (max-width: 375px) {
      #navbar{
        background-color: transparent;
      } 
    }

  <nav id="navbar">
    <div style="display: flex; justify-content: space-between;">
    <h3 style="color: orange;">My site</h3>
    <h5 style="color: white;">Some link</h5>
    </div>
  </nav>
  <h1>Hello world!</h1>

【讨论】：

您好，首先感谢您的帮助！我试过了，但它不起作用。它只是不喜欢我的导航栏，而且我将不透明度更改为 0.4 例如，它只是创建了一个透明菜单，并且仍然将网站的其余内容向下推。我希望下拉菜单是透明的，并且可以覆盖网站的内容，您还有其他想法吗？
再次检查我的答案。我编辑了那个。添加了所需的整个代码。如果您需要解释，请在此处评论。