hover Problem mit IE7

[Ciaoman]

:hover funktioniert im IE7 wie in anderen Browsern - jedoch nur im standardkonformen Modus! Prüfe also ggf. ob du dich nicht im Quirksmodus befindest.

Okay stimmt, es funktioniert wirklich jedoch wenn ich den richtigen Doctype mit URL verwende sprengt es wieder meine Abstände, also das menü rückt beim Ausklappen ca. 20px zu wit nach rechts.

Code:
div#nav {font-family:verdana; font-size:9pt; width: 129px; float:left; margin-top: 20px;}
div#nav ul {margin-left:-2 px; margin-top: 0; padding:0; width: 129px; background: #f0f0f5; border: 1px solid #403;z-index:1;}
div#nav li {position:relative; list-style: none; margin:0; border: 1px solid #CCC; z-index:1;}
div#nav li:hover {background: #ffffff;}
div#nav li.sub {background: url(pics_navi/pf_re2.gif) 98% 50% no-repeat;}
div#nav li.sub:hover {background-color: #F0F809;}
div#nav li a {display:block; padding: 0.5em 0 0.25em 0.5em; text-decoration:none;}
div#nav>ul a {width: auto;}
div#nav ul ul {position:absolute; top:-1px; left: 128px; width:220px; display:none; z-index:1;}
div#nav ul.level1 li.sub:hover ul.level2,
div#nav ul.level2 li.sub:hover ul.level3 {display:block;}
div#nav ul.level3 {position:absolute; top:-1px; left:219px; margin-top: 0px;}
</style>

Kann mir das vielleicht jemand erklären??