CSS Menu Shadow Problem

Question

Hello, please take a look at the blue menu bar at the top of http://www.animefushigi.com

Home | Latest Episodes | etc...

If you look into the page source for this menu, I have to list each menu TWICE for it to work properly, else the text of the menu is very light and there is no seperator or hover image.

This is how my Theme works.

I don't think this is good for SEO reasons, I want to only have one <li>...Home...</li> etc

What changes in my css do I need to do for this?

css is found @ : www.animefushigi.com/wp-content/themes/darkblue/style8.css

Thanks!!

Answer 1

You can hide your text and use images. You can use CSS3 text-shadow property (will work only in modern browsers). You can combine both metods, depending on visitors browser.

Answer 2

I agree it is bad for SEO as well as just overall implementation. It could be done using background images with 1 li per navigation item. You can use the regular a:hover to swap out background images. The hover image could be positioned to the top right to allow for that same affect you are trying to get with this.