Antworten auf deine Fragen:
Neues Thema erstellen

Fehler bei css drop-down menü

azraelb

Noch nicht viel geschrieben

Hallo,
ich habe mal einen Prototypen von einem css menü erstellt, aber irgendwie bekomme ich es nicht hin, dass sich das Untermenü genau neben dem Oberpunkt öffnet.
Statt dessen hängt es immer ca. einen Menüeintrag tiefer:( (also im Firefox, im IE geht das ja ohne weiteres sowieso nicht und das is mir auch erstmal wurst)

Hier mal der Code, hoffe jemand kann mir helfen;)

Danke!! Euer Az


Code:
<div id="nav_container">
  <ul id="navigation">
    <li><a href="#site1">Seite 1</a></li>
    <li><a href="#site2">Seite 2</a>
      <ul>
        <li><a href="#site2a">Seite 2a</a></li>
        <li><a href="#site2b">Seite 2b</a></li>
      </ul>
    </li>
    <li><a href="#site3">Seite 3</a></li>
    <li><a id="selected" href="#site4">Seite 4</a>
  </ul>
</div>
Code:
div#nav_container {
  padding: 0.8em;
  border: 1px solid black;
  background-color: green;
}

div#nav_container div {
  clear: left;
}

ul#navigation {
  margin: 0; padding: 0;
  text-align: center;
}

ul#navigation li {
  list-style: none;
  width: 8.6em;
  position: relative;
  margin: 0em; padding: 0;
}

ul#navigation li ul {
  display: block;
  margin: 0; padding: 0;
  position: absolute;
  top: 0em;
  left: 8.6em;
}

ul#navigation li ul li {
  float: none;
  display: block;
  margin-bottom: 0em;
}

ul#navigation a, ul#navigation span {
  display: block;
  padding: 0.2em 1em;
  text-decoration: none; font-weight: bold;
  border: 1px solid black;
  border-left-color: white; border-top-color: white;
  color: yellow; background-color: #ccc;
}

ul#navigation a:hover, ul#navigation span, li a#selected {
  border-color: white;
  border-left-color: black; border-top-color: black;
  color: white; background-color: blue;
}

li a#selected {  /* selectede Rubrik kennzeichnen */
  color: maroon; background-color: red;
}

ul#navigation li ul span {  /* selectede Unterseite kennzeichnen */
  background-color: yellow;
}

ul#navigation li>ul {
  display: none; top: 1.6em;
}

ul#navigation li:hover>ul, ul#navigation li>a#selected+ul {
  display: block;
}
 

MainAngler

Excel (SVERWEIS...)

AW: Fehler bei css drop-down menü

Da musst wohl ein margin-top: -Xpx eintragen.;)

Beispiel:
Code:
ul#navigation li:hover>ul, ul#navigation li>a#selected+ul {
  display: block;
  [B]margin-top: -20px;[/B]
}
 

feelx75

Hotpixel

AW: Fehler bei css drop-down menü

Wobei, wenn's geht, dann vllt mit margin:top -Xem probieren, damit beim reinen Text vergrössern, es auch wieder funktioniert.

BTW: hier ist sonst mal noch ein Link, den ich mal gebookmarked habe, vllt bringts dir was...


Good Luck
 

feelx75

Hotpixel

AW: Fehler bei css drop-down menü

Etwas noch zu dem Thema - es gibt das , das recht ausgeklügelt ist. Es basiert zwar auf jQuery, ist jedoch auch CSS-only kompatibel (bei IE6 nicht, wie die anderen Lösungen auch).

Es hat aber ein paar nette Features, unter anderem kann man einstellen, dass das Menu noch eine Zeit lang (1s oder so) stehen bleibt, auch wenn es kurzzeitig den Focus mit der Maus verliert. Sowas finde ich noch praktisch. Habe es zwar noch nicht eingesetzt, werde es aber demnächst machen :)

good luck
 

azraelb

Noch nicht viel geschrieben

AW: Fehler bei css drop-down menü

@azraelb
Welches hast du denn jetzt ausprobiert? Das von feelx75 oder meins?:uhm:

Habe deins ausprobiert...

Das ist mir so garnicht bekannt.:uhm:
Richtig wäre wenn dann
Code:
margin-top: Xem

Das Minus muss schon davor, das war ja genau mein Fehler, dass ich nicht an ein negatives margin gedacht habe.
Soweit ich weiß, muss es aber margin-top heißen und nicht margin:top, kann es aber mal ausprobieren ob das auch funzt, wenn ich daheim bin.
 

MainAngler

Excel (SVERWEIS...)

AW: Fehler bei css drop-down menü

Soweit ich weiß, muss es aber margin-top heißen und nicht margin:top, kann es aber mal ausprobieren ob das auch funzt, wenn ich daheim bin.
Das margin:top (Eigenschaft:Wert) kann nicht funktionieren, aber mein Code war ja gleich richtig geschrieben.:D
Der (Flüchtigkeits-)"Fehler" kam ja von feelx75.
 

feelx75

Hotpixel

AW: Fehler bei css drop-down menü

Ja richtig... sorry war ein Vertipper - mit dem Doppelpunkt :) Ist bei meinem Macbook Pro direkt neben dem "-" und mir optisch dann ned mehr aufgefallen ;)
Und yep.. negative Margin-Werte sind erlaubt, gemäss Spezifikationen... Aber schau dir doch dennoch das "superfish" an - find ich wirklich noch genial ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben