Html 无法添加我的菜单导航栏的文本颜色

这应该是一件相当简单的事情，但是无论我在哪里添加

color:black菜单项不显示，您只能在我单击并突出显示它们时才能看到它们。请有人指出哪个类需要
color
标记才能将文本颜色更改为黑色？我试着用
颜色：黑色将其放置在
.topnav
中但没有更改任何内容

当我在另一个页面上时，我也不能改变活动类，似乎只停留在主页上

.topnav {
  background-color:white;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: grey;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

菜单代码：

<!-- NAV BAR homepage-->
<nav>
  <!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
  <div class="topnav" id="myTopnav">
      <a href="index.php" class="active"><i class="fas fa-home">&nbsp; Home</i></a>
      <a href="about.php"><i class="fas fa-info-circle">&nbsp; About</i></a>
      <a href="contact.php"><i class="fas fa-envelope">&nbsp; Contact</i></a>
      <?php  
        // The below is a small 'if else' statement which depending on whether a user is logged in or not, the menu items will differ
        // If logged in, then show the logout and the dashboard item
        // If not logged in, then show the login and signup button
        if (!isset($_SESSION['studentID'])) {
          echo "<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'>&nbsp; Login</i></a>";
          echo "<a href='signup.php'><i class='fas fa-check-square'>&nbsp; Sign Up</i></a>";
        } else if (isset($_SESSION['studentID'])) {
          echo "<a href ='dashboard.php'><i class='fas fa-tachometer-alt'>&nbsp; Dashboard</i></a> ";
          echo "<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'>&nbsp; Logout</i></a>";
        }
      ?>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="menu2Function()">&#9776;</a>
  </div>
</nav>



我已右键单击控制台以查看“样式”选项卡：

这是我在屏幕上看到的内容，无需将鼠标悬停在菜单项上：

当我将鼠标悬停在某个项目（关于）上时，会看到以下内容：
只需将
颜色：黑色
添加到您的
.topnav a
组件中，然后从
标签中取出文本即可。例如：

联系人

为此：

联系人

你会得到这样的结果：


.topnav{
背景色：白色；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景颜色：灰色；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*在topnav链接和悬停按钮上添加黑色背景*/
.topnav a:悬停，
.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
/*将灰色背景添加到悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*当用户将鼠标移动到下拉按钮上时，显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}

;
;
;
;
只需将
颜色：黑色
添加到您的
.topnav a
组件中，然后从
标签中取出文本。例如：

联系人

为此：

联系人

你会得到这样的结果：


.topnav{
背景色：白色；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景颜色：灰色；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*在topnav链接和悬停按钮上添加黑色背景*/
.topnav a:悬停，
.dropdown:悬停.dropbtn{
背景色：#555；
颜色：白色；
}
/*将灰色背景添加到悬停时的下拉链接*/
.下拉列表内容a：悬停{
背景色：#ddd；
颜色：黑色；
}
/*当用户将鼠标移动到下拉按钮上时，显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}

;
;
;
;
对于第一个音高，我认为文本的颜色与导航栏/正文的背景相同，因此您可以尝试向导航栏添加
背景色：颜色

.topnav a {
 background-color: lightgray; //background-color
 float: left;
 display: block;
 color: black; //change color of the text
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

如果你决定不加背景色，你可以考虑用“<代码>颜色：[颜色] < /代码> .< /p> < > >第一个音高，我会说你的文本颜色与NavBar /体的背景相同，所以你可以尝试添加一个<代码>背景颜色：颜色到你的NavBar。
.topnav a {
 background-color: lightgray; //background-color
 float: left;
 display: block;
 color: black; //change color of the text
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
}

如果你决定不添加背景颜色，你可以考虑用“<代码>颜色：[颜色] < /COD> .< /p> 将上面的文本颜色更改为以上任何代码，如果要添加背景全Navar，则添加
.topnav{
背景色：热粉红色；
溢出：隐藏；
}

图片如下所示


若要添加仅背景项，请将下面的样式代码添加到

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background: red;// background will be red all menu item
    }

如下图所示

如果您想添加回