CODEWITHSUNDEEP
htmlcss
EmmaZ
EmmaZ

Reputation: 35

Simple CSS code not working. Menu bar doesn't show the right color when selecting a tab. Please

beginner girl here who is completely stuck at her first CSS project. Please please tell me what I am doing wrong.

So I have this horizontal menu, with three stupid tabs. I want the background color for the selected tab to be different (done!), and also the font color to be different - which is not happening, despite by best efforts for the past hour.

This is the HTML: 

  <nav>
      <ul>
        <li class="selected"><a href="tema.html">Job Description Details</a></li>
        <li><a href="">Audit Trail</a></li>
        <li><a href="">Files</a></li>
      </ul>
    </nav>

And the CSS. Here the background property for the last rule IS APPLIED. But if I add a color one, nothing happens. Does the code have a grudge against me? :( 

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
nav {
  background-color: #488AC7;
  margin: none;
}
nav ul {
  margin: 0px;
  list-style-type: none;
  padding: 5px 0px 5px 0px;
}
nav ul li {
  display: inline;
  padding: 5px 10px 5px 10px;
}
nav ul li a:link,
a:visited {
  color: #F0FFFF;
  border-bottom: none;
  font-weight: bold;
}
nav ul li.selected {
  background-color: #F0FFFF;
  border-bottom: none;
}

Upvotes: 2

Views: 61

Answers (2)

Aziz
Aziz

Reputation: 7783

Try this

nav ul li.selected a, nav ul li.selected a:visited {color:red;}

Upvotes: 1

palawer
palawer

Reputation: 125

Add

nav ul li.selected a {
    color:red; 
}

Color on nav ul li.selected is applied to the text that are no links. You have to specify the color for the links with nav ul li.selected a.

Upvotes: 0

Related Questions