problem mit drop-down menü

Angel0203 · 05.05.2011

Ich habe folgendes problem:
Ich möchte eine Navigation machen, in der ein bereich eine unterkategorie (drop-down) enthält.
Habe mir ausm Netz das wichtigste rausgesucht. Funktioniert jetzt auch endlich, nach Tagen. Bis auf ein Problem. Fährt man mit der maus über das drop-down menü ist der hover bereich an der linken und rechten seite zu groß, und man kann die anderen navi links nicht errreichen...
Hier mal Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="" />
<link rel="stylesheet" href="stylesliste.css"></link>

<script type="JavaScript">

</script>

<style type="text/css">

</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">

<div class="navi">
<ul id="nav">

<li class="home"><a href="#"></a>
</li>

<li class="fotos"><a href="#"></a>
</li>

<li>
<div class="arbeiten"><a href="#"></a></div>
<ul>
<li class="foto"><a href="#"></a></li>
<li class="grafik"><a href="#"></a></li>
<li class="web"><a href="#"></a></li>
</ul>
</li>

<li class="impressum"><a href="#"></a>
</li>
</ul>
</div>

</body>
</html>

Das Problem behebt sich jedoch wenn man den kleinen Teil ändert:
<li><div class="arbeiten"><a href="#"></a></div> würde zu
<li class="arbeiten"><a href="#"></a> werden.
Ist eigentlich besser jedoch funktioniert dann das ganze drop-down nicht mehr, man sieht dann nur einen link, aber der enthält dann das bild von der Oberkategorie. ( Okay, das war nicht wirklich verständlich. )
Bin am verzweifeln :'(

Da ich nicht weiß, ob das CSS auch von Bedeutung ist, ist die ganze seite unter:
zu erreichen.

Ich hoffe, dass mir jemand weiterhelfen kann, bin seit tagen damit beschäftigt und langsam bin ich am ausflippen.

LG

Myhar · 05.05.2011

AW: problem mit drop-down menü

Hallo,

es wäre nett von dir, wenn du deinen Code das nächste Mal in [ CODE ] Blöcke stecken würdest, dann wäre das ganze einfacher zu lesen.

Warum so kompliziert mit JS?
Mach zuerst eine strukturierte Liste deines Menüs:

Code:

<ul id="nav">
<li><a>Punkt1</a></li>
<li><a>Punkt2</a></li>
<li><a>Unterpunkte</a>
    <ul>
        <li>Unterpunkt1</li>
        <li>Unterpunkt2</li>
    </ul>
</li>
[usw.]
</ul>

Ist deine Liste korrekt aufgebaut, dann musst du sie nur noch ein- und ausblenden mit CSS:
Hier mal die simple Variante, wo die Liste nur ein- und ausgeblendet wird.

Code:

#nav li ul {left:-999em;}
#nav li:hover ul {left:auto}

Ich kann das jetzt im Moment gerade nicht testen, aber es sollte so die Navigation ein- und ausgeblendet werden. Ich schau mir das aber später/morgen genauer an, falls es Fehler dabei gibt.

L. G.

Angel0203 · 05.05.2011

AW: problem mit drop-down menü

Problem hat sich nun endlich erledigt, nach Tagen hab ich es endlich selbst geschafft.

Hab einfach die klassen mal in id's umgewandelt, und auf einmal gehts.
Warum ist mir eigentlich nicht wirklich einleuchtend. :nee:
Aber Hauptsache es funzt.
Ich dachte schon ich sitze noch ne woche dran.

DanielB86 · 09.05.2011

AW: problem mit drop-down menü

Mal ne Frage. Arbeitest du mit Dreamweaver? Dann könntest du einfach Sprymenüs benutzen, das würde dir viel Arbeit ersparen.

Angel0203 · 10.05.2011

AW: problem mit drop-down menü

Nein, ich arbeite mit nem stinknormalen 08/15 html-Editor.
Bei Dreamweaver hab ich irgendwie immer so meine Probleme gehabt, wobei ich auch mal festgestellt habe, dass er ganz nützlich sein kann.

Aber ich habe auch keinen, und nicht das nötige "Kleingeld" dafür.
Also erledigt sich das schon.

Und ich habe auch keine Ahnung was Sprymenüs sind.

Das wichtigste ist, dass ich es hinbekommen habe. Und das ganz alleine.
Hab gestrahlt wie n honigkuchenpferd

LG

DanielB86 · 10.05.2011

AW: problem mit drop-down menü

Da kann man immer stolz auf sich sein. Ein Spry-Menü ist den deinen sehr ähnlich. Ein Drop-down Menü bei Mouseover.