Patryk Michta Patryk Michta - 1 year ago 77
HTML Question

How to change the color of the active link in the menu

Here is the menu html code for the nav bar:

<div id="menu">
<li><a href="index.html">Home Page</a></li>
<li><a href="history.html">History</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="inf.html">Information</a></li>
<li><a href="photo.html">Photos</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Useful Links</a></li>

and here's the code for css :

float: left;
margin-top: 15px;

nav ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;


nav li {
display: inline-block;


nav a {
padding: 8px 0px;
color: #ffffff;
display: block;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;

nav a:hover {
color: #cccccc;

So for example, if I am currently looking at history page, the text "History" in the navbar will be red. How can I do such a thing?

@edit: As stated in a comment, I am trying to avoid jquery.

Answer Source

just add active class name in the active state link.

<li><a href="index.html">Home Page</a></li>
<li><a href="history.html">History</a></li>
<li><a class="active" href="events.html">Events</a></li>
<li><a href="inf.html">Information</a></li>

And in your CSS

nav {
   color: red;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download