How do I highlight a menu item (an active element ) of a simple text menu (LHS) ?

I am having a simple text menu in the LHS of the page. It is not a multi level menu. I want the menu item to be highlighted in white color when active and green otherwise. In short all menu items should be in green except the white one which is active (i.e highlighted)

Can you throw some light on this on how this can be achieved ? I am using struts and JSP
avanworldAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CEHJCommented:
0
AnimasuCommented:
a{color:green;}
a:hover{color:white;}

Like that?

If you want just a specific <a> element to have the changed (the above dose them all) then use something like

a#element{color:green;}
a:hover#element{color:white;}

or

a.element{color:green;}
a.element:hover{color:white;}

then place it in the <a> tag like so <a class="element" href="#">eh...?</a>

you can find some more information about this here

http://www.pixel2life.com/tutorials/css_stylesheets/rollovers/

I Hope this helps you out!!

- Animasu
0
avanworldAuthor Commented:
Hi CEHJ & Animasu,

The menu item which is active should be highlighted in white color when we view the page but not on mouse over. I mean it should be continuously highlighted in white while active and other menu items should continue to appear in green. When we select another menu item that should appear in white and the currently selected one should appear as green. This should happen dynamically when user keep on selecting different menu items.

The current solution what you have suggested works on mouseover but please provide a solution for the above. Any help is highly appreciated.
0
CEHJCommented:
You use a:active for what you want - see the link i posted
0
Mark StegglesWeb DeveloperCommented:
Hello avanworld,

Give each page an id in the body tag         <body id="sales">

Give each menu item a unique id or class     <li class="sales"><a href="#"></a></li>

Then in your css, you can use logic to say if on the page with id="sales" in the body, then make the menu item with class="sales" active

body#sales li.sales a {background-color:#fff;}


Hope this makes sense
Regards,

Steggs
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.