Why isn't my navbar text changing color with CSS?-CodePudding

With the following HTML and CSS I can't seem to be able to change the text color of the hyperlinks in blue or purple? What am I missing?

<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="book.html">Book</a></li>
            <li><a href="about.html">About</a></li>
        </ul>
    </nav>
</body>

nav ul { /* Navbar unordered */
    list-style: none;
    text-align: center;
    background-color: #495e57;
    border-radius: 10px;
}

nav li { /* Navbar ordered */
    display: inline-block;
    padding: 20px;
    font-size: 1.5rem;
    border-radius: 10px;
}

nav li:hover{ /* Navbar on mouse hover */
    background-color: #1f2926;
    color: white;
}

I have tried making using of !important to no avail. The only successful method I found is wrapping it in the HTML code itself as such:

<li><a style="color: white" href="index.html">Home</a></li>

CodePudding user response：

Another idea is to have the a tag's color property set to inherit, so that it inherits the computed color of its parent li property:

nav ul {
  /* Navbar unordered */
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  /* Navbar ordered */
  /* set default color to blue, so that anchor tags inherit this */
  color: blue;
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  /* Navbar on mouse hover */
  background-color: #1f2926;
  color: white;
}

nav a {
  /* anchor tags should inherit color of parent */
  color: inherit;
}

<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Menu</a></li>
      <li><a href="book.html">Book</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</body>

CodePudding user response：

You're setting the color to the li instead of a.

a element has a default color so you need to select it.

a { 
  color: white;
}

nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

a {
  color: white;
}

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Or on (li) hover :

nav li:hover a {    
  color: white;
}

nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

nav li:hover a {
  color: white;
}

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>