Active Menu Highlight CSS

by

Add a class to the body of each page:

<body class="home">

Or if you’re on the contact page:

<body class="contact">

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:

<ul>
  <li class="home"><a href="https://stackoverflow.com/questions/10646775/index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

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.

Leave a Comment

tech