Change color for selected menu

HTML & CSS
1

Good day,

I have a website with a menu with different options. When select an option, a new page is displayed.
When select an option, I’d like to have this option in a different color, showing which option is selected.
I have tried using:

#menu a:hover {
color: green;
}

But what I get is when mouse pointer is on the menu option, it turns green, but it does not remain green after selected.

Thanks a lot!!!

2

I think this post answers your question.

3

Hi,

Thanks a lot for your help.
I have studied the post, maybe I understood it wrongly, but I found it is needed to modify menu source code for each page, in order the right menu section is highlighted in each case.
Is it another way to do this? I mean using any dynamic property like “a:hoover”, in order to use one piece of code for menu section for all pages?

Regards.

4

I found it is needed to modify menu source code for each page

This is a yes and no situation. If your page is dynamic, yes the easiest way is to have your script add a class=“current” to all relevant elements ( such as a navigation list item).

Alternatively, you can code the menu so that each link is always identified: ( <li class=“home”>…</li><li class=“item1”>…</li><li class=“item2”>…</li><li class=“item3”>…</li> and so forth) and identify the page <body class=“item1”> ( you can put this clas son a page wrap instead, if you have one)

and your css would be THUS:
.home li.home a, .item1 li.item1 a,.item2 li.item2 a, .item3 li.item3 a, #menu a:hover {color: green;}

Either way you have to identify the link and the page somehow in the CSS, otherwise how would the CSS know which page it’s on and which link is which? :slight_smile:

5

Great!! I will be testing.

Thanks again!!

6