How to apply visited color to multiple links in navigation?

I'm providing user a facility to customize the navigation of templates. I have confirmed that the pseudo classes are inserted in the order they should be. But I开发者_开发技巧'm facing problems as -

1. Sometimes the link color is overridden by hover color.

2. Sometimes visited color is shown as link color though user has defined different colors for both the classes.

3. In preview, when user clicks on any link, the visited color is applied to all the links.

The navigation and other contents are loaded from database, and I have confirmed that the pseudo classes are fetched in proper order.

I tried to fix it many ways, but nothing could help.

Edit

I have added the HTML and CSS at -

http://jsfiddle.net/DsWaN/1/

This is because you are testing with the destination URL as #.

If you have links like:

<a href="services.html">Services</a>

<a href="about.html">About</a>

Then on visiting a link, the individual link will attain the :visited pseudo-class independently.