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

As the given tag to this question is CSS, I will provide the way I accomplished it.

1. Create a class in the .css file.

   a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

2. Nav-bar will be like:

   • Home
   • Contact Us
   • About Us

NOTE: If you are already setting the style for all Nav-Bar elements using a class, you can cascade the special-case class we created with a white-space after the generic class in the html-tag.

Example: Here, I was already importing my style from a class called 'navList' I created for all list-items . But the special-case styling-attributes are part of class 'activePage'

.CSS file:

a.navList{text-decoration: none; color: gray;}
a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

.HTML file:

    

        
 Home 
        
 Contact Us 
        
 About Us 
    

Look how I've cascaded one class-name behind other.