Fehler bei css drop-down menü

[azraelb]

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

<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>

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]

AW: Fehler bei css drop-down menü

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

Beispiel:

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

 

[feelx75]

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

 

[azraelb]

AW: Fehler bei css drop-down menü

Yo Danke, das klappt!!

 

[feelx75]

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

 

[MainAngler]

AW: Fehler bei css drop-down menü

....vllt mit margin:top -Xem probieren...

Das ist mir so garnicht bekannt.:uhm:
Richtig wäre wenn dann

margin-top: Xem

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

 

[azraelb]

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

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]

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.
Der (Flüchtigkeits-)"Fehler" kam ja von feelx75.

 

[feelx75]

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