Hallo,
zuerst einmal solltest du die zusammengehörigen Listeneinträge und Listen ineinander verschachteln, denn so kannst du sie mittels deines Selektors
"#nav ul li:hover ul" auch problemlos selektieren:
Code:
<ul>
<li>
<a href="#">Home</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
Außerdem solltest du, statt der Eigenschaft
visibility (hidden/ visible), die Eigenschaft
display (none/ block) zum ein- und ausblenden der Elemente nutzen. Die Eigenschaft
visibility birgt, wenn man sie auf 'hidden' setzt, nämlich das Problem, dass das Element zwar nicht mehr sichtbar ist, der Platz allerdings trotzdem eingenommen wird. Ich denke nicht, dass das für deine Navigation von Nutzen ist.
Optional kannst du die Klassen "mlink" und "link" auch mit einem "display: block" versehen. Das hat den netten Effekt, dass der Link sich über die gesamte Breite des umschließenden Elementes erstreckt.
PS: Ich habe hier ein ganz nettes Tutorial zum Thema Dropdown Menüs gefunden. Das wird dir sicherlich weiterhelfen:
-
CSS3 Dropdown Menu
Gruß, lotti.