i've been looking for a way to make a rollover effect fade in and out without using images for navigation, for quite some time... I finally stumbled upon this link:

http://css-tricks.com/color-fading-menu-with-jquery/

This seems like the holy grail to me, but with one small issue, it's not written with styled list based navigation in mind, therefore being less than ideal in terms of logical HTML markup for screen readers.

I'd like to modify this script to work with:

Code:
<div id="navcontainer">
<ul id="navlist">
	<li id="active">	<a href="#" id="current">	link1 </a></li>
	<li>			<a href="link2.html">		link2 </a></li>
	<li>			<a href="link3.html">		link3 </a></li>
	<li>			<a href="link4.html">		link4 </a></li>
	<li>			<a href="link5.html">		link5 </a></li>
	<li>			<a href="link6.html">		link6 </a></li>
</ul>
</div>
but I'm totally lost. Could someone help me out with this? It looks doable, but i'm not too solid on layering divs in css or on jQuery coding.