Did a quick review of this, -starting to figure things out.
Are you after THREE roll-over links here? I see six images dedicated to that, in three seperate <ul>s. You can do it that way, -but you bloat the code and make it more difficult to create/edit. That is SIX http-requests right there for six different images, -halfway to getting 'warnings' for over-using images per page (when optimizing for downloading speed that is, -not any validation issue with 6 or one hundred sixty-six images, -it's just download-time issue).
Assuming I am that you want the order to be:
My Account Catalog Events
and that you want the brighter image for the 'at rest' state, and the darker, shaded image for the "hover state, -is this correct? Assuming this, -I merged the six images into ONE image. With your approval of this order ("My Account", "Catalog" and "Events") and the hover-state order ("bright image" at rest, and "shady image" on-hover), I can procede. Orif you want the 'shady' to be the normal state, and the 'bright' to be the 'hover state', -let me know. It's just a quick 15-second fix to the image, and I can move ahead with this.
I would condense those three <ul>s into just one, and using the merged image osceola-Lib.jpg (image attached: see Screenshot), spaced to reveal the specious 'bright' portionwhen you first view the page, use that for the "background-image" of each <li> and adjust the pseudo-class hovering to reveal 'just the shady'.
I also noted that the image "Header" is like what, -47.-something KB? That is over 4X larger than a typical web page needs to be to assure a 'under 10-second download @ 56-K'. With your approval I would slice that up a bit and use a 'background-color' instead. About 75% of that image is 'just color', -in image format. -Quite possibly I can shave-off 30 or 35-Kb off the image (and thus, the page as well).