You could do things differently though.
Instead of adding a div ontop of the <li> and using all of those variables, the <a> could be the hover state and the <li> could be the default state. Have a look at this tutorial http://css-plus.com/2010/03/fading-navigation-menu/.
I can see you are going for the "work with js disabled" approach. But I think it would probably be possible to do this (with a little but of editing) and more simple to go for the other approach.
What I like to do when one of a set of things isnt working is to delete it and replace it with a copy of one of the working ones and then tweak and check step by step till you transform it into the original you wanted.. In your case, delete the 2nd link and copy the first in it’s place. If it works, this assures you that there was in fact an issue with the code and it wasn’t just affecting the 2nd link, which ever one it may be.
After you have a working duplicate link in place, change it piece by piece checking it each time to make sure it works. Continue till you have the link you originally wanted. If it suddenly doesn’t work, probably like how the original problem was, then you found what was causing the issue and can fix it.