Active Menu Highlight CSS

Question

I want to highlight the current menu you have click. I\'m using CSS, but it is now working.

here is my css code:

#sub-header ul li:hover{ background-         


        

Answer 1

Add a class to the body of each page:

Or if you're on the contact page:

Then take this into consideration when you're creating your styles:

#sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}

#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }

Lastly, apply class names to your list items:

  
Home
  
Contact Us
  
About Us

This point, whenever you're on the body.home page, your li.home a link will have default styling indicating it is the current page.