How Do I give the active menu items a different color - HTML5 CSS

Question

I am trying to add a different color to my active menu items.

I have tried a few different ways but, there must be something I'm missing.

Here is my code:

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #eda547;
}
#menu ul a.opener.active + ul,
#menu ul span.opener.active + ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu > ul > li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu > ul > li > ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu > ul > li > ul a,
#menu > ul > li > ul span {
  font-size: 0.8em;
}
#menu > ul > li > ul > li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

Answer 1

#menu > li.active > a{ color: #f46e28; } this will help you definitely.

Answer 2

To sum it up:

• You want to have active menu items to be styled differently

• To achieve this without using JavaScript you have to add a class like "active" (as mentioned above) to your list item tag

• You have to do that for each site with its active menu item

Also prefer to change style for list element (like Rahul's answer) rather than applying it to the ulclass like you did in your css.

Answer 3

You can use link:active in CSS like this:

menu ul a:active,
menu ul span:active {
  color: #ff0000;
}

It will allow you to adjust whatever you need when the link is clicked and active.

Answer 4

You need to apply a class to the active menu item.

For example:

#menu ul > li.active > a{
  color: red;
  background:yellow;
}

Adding the css from above to your code gives you this result:

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #efa341;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}

#menu ul > li.active > a{
  color: red;
}

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li class="active"><a href="index.html">Home</a>
    </li>
    <li>
      <span class="opener">Services</span>
      <ul>
        <li><a href="webdevelopment.html">Web Development</a>
        </li>
        <li><a href="customisedsoftwaredevelopment.html">Customised Software Development</a>
        </li>
        <li><a href="ecommercesolutions.html">E-commerce Solutions</a>
        </li>
        <li><a href="softwaremaintenance.html">Software Maintenace</a>
        </li>

      </ul>
    </li>

    <li>
      <span class="opener">Products</span>
      <ul>
        <li><a href="ikat.html">Practice Management Application</a>
        </li>
        <li><a href="Itrack.html">Electronic Claims</a>
        </li>
        <li><a href="iportals.html">Electronic Invoicing</a>
        </li>
        <li><a href="dalymorgan.html">Debt Recovery</a>
        </li>
        <li><a href="ibridge.html">Automated account collection</a>
        </li>
        <li><a href="lms.html">Learner Management System</a>
        </li>
      </ul>
    </li>


    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="aboutus.html">About Us</a>
    </li>
    <li><a href="contactus.html">Contact Us</a>
    </li>


  </ul>
</nav>

Answer 5

you need to apply class like "active" to respective menu and apply css to it

like

#menu ul > li.active > a{
  color: red;
}