Navigation mit Abstand macht Probleme und hover mit Daueranzeige möglich?

Hallo an Alle!

Meine Navigation ist, dank Forum und dem tollen Buch von Peter Müller fast fertig und macht fast alles was sie soll.

Nun habe ich aber noch zwei Probleme. Die Navi läuft unter: http://www.jkfotounddesign.de/home.html

1. Das Untermenu ist horizontal ausgerichtet, sitzt aber etwas tiefer im weißen Bereich, ans Layout angepasst. Dadurch ergibt sich nun aber ein Abstand zwischen den Menupunkten, wodurch diese nicht klickbar sind (in der Kombination mit hover macht es das noch problematischer) "Schule" hat sehr viele Unterpunkte dadurch sitzen die dann auch bei Firefox in erreichbarer Nähe. Im IE gehts gar nicht anzuklicken. Die Unterpunkte bei "Hort" sind dann aber auch für den Firefox nicht mehr zu erreichen, da nur zwei und dann zu weit links.

2. Die Unterpunkte sollen nur bei Hover sichtbar sein, da sie sich ja sonst überlappen. Gibt es eine Möglichkeit das Hovern mit einem Klicken zu kombinieren? Ich hover also über einen Hauptpunkt und sobald ich diesen oder einen dazugehörigen Unterpunkt klicke bleibt das jeweilige Untermenu stehen. Damit wäre ich dann auch Problem 1. los.

Vielen Dank für Hilfe
Julia

Hallo Julia,

ich habe eine meiner Navigationen auf die schnelle umgebaut.

Deshalb mußt Du noch ein wenig "aufräumen" bzw. die Farben und Pixel anpassen.
Und gib der Einfachheit halber Deiner Navi auch die ID mainmenu oder ändere den Code.

Code:

---

#mainmenu{left:0;float:left;padding-top:80px;}
#mainmenu ul,#mainmenu li{margin:0;padding:0;background-color:#F4F4F4;list-style-type:none;}
#mainmenu li{float:left;}
#mainmenu a{display:block;padding:12px 14px;background-color:#f4f4f4;font-size:14px;font-weight:normal;text-decoration:none;color:#777777;letter-spacing:1px;}
#mainmenu a:hover,#mainmenu a.trail,#mainmenu span{display:block;padding:12px 14px;background-color:#fA0000;font-size:14px;font-weight:normal;text-decoration:none;color:#fff;}
#mainmenu li:hover{background-color:#ffffff;}#mainmenu .level_1 ul{width:700px;left:-999em;position:absolute;margin-bottom:0;background-color:#FA0000;}
#mainmenu .level_2 li a{color:#777777;}
#mainmenu .level_2 ul{margin:-20px 0 0 160px;}
#mainmenu .level_2 a{padding-top:6px;padding-bottom:6px;background-color:#f0f0f0;font-size:13px;color:#777777;}
#mainmenu .level_2 a:hover,#mainmenu .level_2 span{padding-top:6px;padding-bottom:6px;background-color:#f40000;font-size:13px;color:#ffffff;text-transform:none;}
#mainmenu .level_2 span,#mainmenu .level_2 a.trail{padding-top:6px;padding-bottom:6px;background-color:#e7e7e7;font-size:13px;color:#f40000;text-transform:none;}
#mainmenu li:hover .level_2{left:0;}

---

Ich hoffe es ist das was du sucht. Oder es hilft dir zumindest.

Viele Grüße

Thomas