为什么我不能在CSS上更改导航链接的颜色？

Question

1) Why I can not change the nav-link color on CSS?

I'm trying to change the color of MENUTEST's (nav-link) to white, but it's not working

and

2) Add a line white above every MENUTEST's texts (just like [u] but above) How to do it?

What do i'm doing wrong?

navbar.php

<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>

<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>

</ul>
</div>
</nav>
</header>

And navbar.css

/* MENUTEST */
.nav-link a {
  font-color: white;
}

/* SUBMENUTEST */
.dropdown-menu {
  background: #EDEFF1;
  height: auto;
  width: auto;
  padding-left: 5px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #DDDDDD;
}

.dropdown-menu a {
  color: #78828D;
  font-size: 15px;
}

...............................................

Answer 1

font-color is not a css property. You'll want to use color .

.nav-link a {
  // font-color: white;
  color: white;
 } 

Answer 2

Try and take a little further than just the class and try -> li, a, .nav-link and then whatever css you want.

I can see you are using Bootstrap so it might be inheriting something. A trick I always use it to go to the Chrome browser and right click on the thing I want to change and click on "inspect" this will make it possible to see what css lies behind the item you want to change and you can then try to edit it in the browser and if it works copy that code and insert into your own css file.

Hope it helps :)

Answer 3

`<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
   </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }`

How about this, have you tried using li.selcted a{color:#FF0000;} .