:hover, width und überlappung

[Lorenz Hopfmüller]

Hallo,

auf der neuen Homepage unserer Schule ( http://www.michaeli-gymnasium.de/testnewhomepage/ ) versuche ich gerade die Navigation zu gestalten...

bei hover soll das betroffene Element der Navigation breiter werden,  das klappt auch mit
li.submenu:hover {
        width: 22%;
}
Aber alle anderen Elemente werden verschoben, obwohl sie eigentlich bleiben sollen, wo sie sind, sprich das hervorgehobene Element soll sie überlappen...
etwa so: http://www.michaeli-gymnasium.de/testnewhomepage/navi.gif

wäre nett, wenn mir da jemand auf die sprünge helfen könnte...

danke!
Lorenz Hopfmüller