#nav li{display:inline;}
Das Problem ist, wenn ich über den Link 3 mit der Maus gehe, erscheinen die Untermenü's nebeneinander neben Link 3.
Klar, weil du mit der obigen CSS-Regel sagst, dass alle li-Elemente innerhalb von #nav display:inline haben sollen. Davon sind auch die li-Elemente des verschachtelten Menüs betroffen.
Eigentlich willst du aber nur die direkten li-Kindelemente von #nav mit display:inline versehen, die verschachtelten sollten display:list-item behalten.
Jetzt könntest du
#nav > li { ... }
schreiben, also mit einem Kindselektor arbeiten. Der IE 6 versteht das aber nicht, also verwendest du besser eine weitere Regel, die display:inline für das Untermenü wieder zurücksetzt:
#nav li li { display: list-item; }
oder (ist glaube ich noch kompatibler)
#nav li li { display: block; }
Ähnlich wird hier gearbeitet:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Dort sinds float:left und float:none.
Mathias