menu pomocí ul li a

Prosím o pomoc, s tímhle jsem úplně ztracený. Nevím čí práce je toto otřesně spackané menu, ale přiznávám že z části asi moje :-) Problém je v tom, že ve firefoxu (12) mi to jelo, ale v IE8 a Opeře devítkové řady ne. Zhruba vím o chybách, které tam jsou, ale neumím je odstranit, aby se to celé nerozbilo. A uvádím tu kód v tom původním znění.

1) koncový tag \p smazat, ten tam nemá být
2) hlavní problém vidím idečka li: <li id="AB"> což se opakuje. a třída .AB která neexistuje, a mělo by být možné odstranit ji, abiž by to mělo vliv na menu.
3) odstranění id="AB" a #id ze stylopisu způsobí, že menu se buď nebude rozbalovat (IE8) nebo se nezobrazí pozadí (FF12).
4) <li class=logout by bylo lepší přejmenovat na <li id=logout ... li.logout nemá obsahovat zvýraznění po najeti myši, proto u těch prvních 4 li jsou ty stejná idečka...
5) nechápu jak to rozbalování rozbalovací podmenu funguje, tak možná i proto nevím co s tím, ale zdá se mi, že chyba po odstranění #id je způsobena podrobnějším selektorem (nějaké pravidlo to přebíjí)

Ještě pro ujasnění tu uvádím jaké by zhruba měly být rozměry prvků
http://paste.ofcode.org/NQANEG25v3UXQgWBVu3TMn
v jsfiddle http://jsfiddle.net/WhSzr/
totiž to nemá správné rozměry a to ani když dosadím místo šířky 8em 85px a místo 9em 108px... Takže tu pro jistotu ještě dávám odkaz na obrázek v FF12:

http://oi39.tinypic.com/502t21.jpg
http://oi43.tinypic.com/2qi8u47.jpg