✔ Problem mit Dropdown-Menü

[Superdok]

Hi, ich arbeite zur Zeit an einem DropDown Menü. Es sieht bisher so aus:
http://www.abload.de/image.php?img=beispiele47p.jpg

Also jeweils aktiver und nicht aktiver Zustand. Das Menü fährt also nach unten aus. Na ja im IE8 und FF funktioniert es gleich "gut" und auch einigermaßen so, wie ich mir das vorgestellt habe. Nun ja das Problem liegt darin, dass wie am Bild zu sehen ist, die Submenüpunkt (bilder) jeweils einen mir nicht erklärlichen Abstand nach oben haben, was nicht sein sollte. Wenn ich die Bilder mit Schrift ersetze im Submenü gehts. Der Code sieht hierfür so aus:

<div id="navigation">
  <ul>
    <li>
      <ul>
        <li><a href=""><img src="images/methods.png" /></a></li>
        <li><a href=""><img src="images/methods.png" /></a></li>
      </ul>
      <a href="whatandhow.html"><img src="images/nav_whatandhow.png" /></a> </li>
    <li><a href="leadership.html"><img src="images/nav_leadership.png" /></a></li>
    <li><a href="clients.html"><img src="images/nav_clients.png" /></a></li>
  </ul>
</div>

#navigation {
	position: fixed;
	top: 0;
	right: 200px;
}
#navigation ul li {
	width: 143px;
	background: url('../images/navigation_back.png') no-repeat left bottom;
	float:left;
	list-style-type: none;
	margin-right: 10px;
}
#navigation ul li img {
	margin-top: 5px;
}
#navigation ul li a {
	height: 50px;
	display:block;
}
#navigation ul li ul {
	display: none;
}
#navigation li:hover ul {
	width: 142px;
	display: block;
	margin-left: 1px;
	background-color: #f8820d;
}
#navigation ul li:hover ul li {
	background-image: none;
	float:none;
}

Hat jemand eine Lösung für dieses Problem? Ich hab schon ziemlich alles, was mir eingefallen ist durchprobiert. Manchmal wurds besser und andere Sachen schlechter, manchmal ging gar nichts.

 

[Maik]

Hi.

das Problem liegt darin, dass wie am Bild zu sehen ist, die Submenüpunkt (bilder) jeweils einen mir nicht erklärlichen Abstand nach oben haben, was nicht sein sollte.

Den unerklärlichen Abstand nach oben würde ich mal beim Überfliegen deines Codes in dieser Regel festmachen:

#navigation ul li img {
	margin-top: 5px;
}

Ansonsten könnte es auch hilfreich sein, die voreingestellten Polsterungseigenschaften des <ul>-Elements zurückzusetzen:

#navigation ul {
margin:0;
padding:0;
}

mfg Maik

 

[Superdok]

Danke, aber ich habe die Regel

* {
	margin: 0;
	padding: 0;
	border: 0;
}

welche das eigentlich regeln sollte.
An dem margin für das Bild kann es nicht liegen.
1. habe ich es versucht, kein unterschied bei den Submenüpunkten, nur bei den Hauptmenüpunkten
2. sind das mehr als 5px bei den Submenüpunkten.

 

[Maik]

Danke, aber ich habe die Regel

* {
	margin: 0;
	padding: 0;
	border: 0;
}

welche das eigentlich regeln sollte.

Das kann ich nicht riechen, denn im obigen Code hast du diese Regel nicht erwähnt

Kannst du mal einen Link nennen, damit man in den Genuß des kompletten Menüs, also incl. der darin eingebundenen Grafiken kommt?

Sollte deine Seite nur lokal existieren, pack alles in eine ZIP-Datei, und häng sie hier als Anhang an.

mfg Maik

 

[Superdok]

Ich habe die benötigeten Dateien für die naviagtion angehängt.
Die Seite ist lokal und für einen Kunden. Ich will sie hier nur ungern veröffentlichen.

 

[Maik]

Dann liegt es an dieser Höhenangabe:

#navigation ul li a {
	height: 50px;
	display:block;
}

Denn abgesehen von "navigation_back.png" sind die übrigen Grafiken überhaupt nicht so hoch.

mfg Maik

 

[Superdok]

Ich benötige diese Höhenangabe, damit das Bild richtig angezeigt wird vom Hauptpunkt. Selbst ohne diese Angabe, verändert sich nichts an den Submenüpunkten, lediglich der Hauptpunkt (das Bild) wird falsch angeziegt (zu weit oben)

 

[Maik]

Dann definierst du eben für die Unterpunkte eine andere Höhe, die auch diesen Grafikhöhen entspricht.

Dadurch ändert sich bei mir in der Tat sehr viel.

mfg Maik

 

[Superdok]

Wenn ich es hier reinmache

#navigation ul li:hover ul li {
	background-image: none;
	float:none;
	height: 20px;
}

dann sind zwar die beiden Submenüpunkte nicht mehr so weit voneinader weg, aber immer noch von obern her sehr weit weg. Außerdem ist die Höhe der Submenüpunkt flexibel, zumindest sollte es so sein.

 

[Maik]

Außerdem ist die Höhe der Submenüpunkt flexibel, zumindest sollte es so sein.

Davon ist in deinem CSS aber nichts zu sehen.

#navigation ul li ul li a {
        height: auto;
        display:block;
}

mfg Maik