Question

<div id='cssmenu'>
 <ul>
    <li class='active '><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>About</span></a></li>
      <li class='has-sub '><a href='#'><span>Contact Us</span></a>
      <ul>
         <li><a href='#'><span>Contact 1</span></a></li>
         <li><a href='#'><span>Contact 2</span></a></li>
      </ul>
   </li>
</ul>
</div>

I want this "HOME" keep inactive just like "ABOUT" and "CONTACT US" if I didn’t touch it by my cursor.

I want each one of them to be activated and turn to blue after my cursor goes exactly at the menu.

Please Help 🙂
Thank You.

Answer 1

Every class you need to use

a {
   //any styles
     color:gray;
  }
a:hover
  {
   //any styles
     color:blue;
  }
a:visited
  {
   //any styles
  }

for ex:

active a
{

  }

active a:hover
{
}
active a:visited
{
}