为什么我看不到我的导航栏，一切正常答案

【问题标题】：Why cant I see my navigation bar , everything is right为什么我看不到我的导航栏，一切正常
【发布时间】：2021-10-23 23:39:26
【问题描述】：

即使一切正常，我也看不到导航栏什么都没有，现在真的很沮丧，我不知道该怎么做，有人可以帮我吗

<html>

<head>
    <link href="app.css" rel="stylesheet" />
</head>

<body>
    <header>
        <div id="topbar">

        </div>
        <nav id="main">

        </nav>
    </header>
</body>

</html>

 body{
     margin: 0;
 }
 header{
     background: url('./images/bg.png') bottom center no-repeat;
     background-size: cover;
     height: 750px;
    
    }
     #topbar {
         height: 70px;
     }

      nav#main {
         height: 150px;
         color: white;
         border-radius: 4px;
        }

【问题讨论】：

也分享你的html代码
欢迎来到 Stack Overflow！请更新问题以包含所有相关代码来演示问题。对于 HTML/CSS/JS 问题，您甚至可以包含一个可运行的代码 sn-p。有关如何提问的提示和信息，请参阅How to Ask 及其链接资源。
当您访问浏览器的 devtools 检查工具时，您会发现什么？应该可以准确地看到覆盖或阻止您的导航显示的内容。

标签： html css navigation main

【解决方案1】：

问题出在您的 nav#main 中，您只应用了 color:white 属性，因此显示了 nav 并且它是白色的。同样，您的 background-color 也未设置，因此不可见。

所以应用background-color 属性。见下sn-p

body {
  margin: 0;
}

header {
  background: url('./images/bg.png') bottom center no-repeat;
  background-size: cover;
  height: 750px;
}

#topbar {
  height: 70px;
  text-align: center;
}

nav#main {
  color: white;
  background-color: red;
  display: block;
  padding: 10px;
  border-radius: 4px;
}

#main a {
  padding: 10px;
  display: inline-block;
  cursor: pointer;
}

#main a:hover {
  background-color: green;
}

<html>

<head>
  <link href="app.css" rel="stylesheet" />
</head>

<body>
  <header>
    <div id="topbar">
      Hello
    </div>
    <nav id="main">
      <a>View</a>
      <a>Help</a>
      <a>Data</a>
    </nav>
  </header>
</body>

</html>

【讨论】：

这是我的html
请更改问题并输入完整代码
不仅标签包括你的 HTML & CSS 完整
我也包含了我的html
@AlexT nav 现在是可见的兄弟。在sn-p中可以看到