Probleme in Menü (Submenü)

[patrickg]

Hallo!

In meiner .css-Datei habe ich für meine Navigationsleiste folgende Anweisung gegeben:
----------------------------------------------

body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

div#Rahmen {
    width: 42.1em;
    padding: 0.8em;

border: 1px solid black;
    background-color: #FFFFB2;
  }
  * html div#Rahmen {
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {
    margin-bottom: -0.1em;
  }

ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {
     background-color: yellow; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7.5em;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: black; background-color: #FFE5B2;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;
    w\idth: 6.4em;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #FFE5B2;
  }
  li a#aktuell {
    color: black; background-color:  #FFE5B2;
  }
  ul#Navigation li ul span {
    background-color: black;
  }

-------------------------------------

Auf den jeweiligen Seiten erstelle ich dann das Menü durch:

<div id="Rahmen">
<ul id="Navigation">
    <li><a id="aktuell" href="index.html">Startseite</a></li>

<li><a href="#">Oberbeispiel</a>
      <ul>
        <li><a href="Beispiel1.html">Beispiel1</a></li>
        <li><a href="Beispiel2.html">Beispiel2</a></li>
      </ul>
    </li>
</ul></div>

Wenn ich auf der html-Seite dann mit dem Mauszeiger über "Oberbeispiel" fahre, erscheinen darunter erwartungsgemäß die zwei Buttons "Beispiel1" und "Beispiel2". Auf den Button "Beispiel1" kann ich auch ohne Probleme mit der Maus fahren und klicken, doch möchte ich auf den Button "Beispiel2" mit der Maus fahren, verschwinden unterwegs die beiden Buttons.
Eigentlich müssten diese auch mit gelbem Rand sein (s. Anweisung oben: *:first-child+html ul#Navigation ul { ).

Kann mir jemand sagen, woran das liegt und wie ich das ändern kann?
Und vielleicht auch, wie ich erreichen kann, dass beim Überfahren mit dem Mauszeiger auf Button "Oberbeispiel" die beiden erscheinenden Buttons nebeneinander und nicht untereinander angeordnet sind?

vielen dank und freundliche Grüße,

Patrick

[Gunnar Bittersmann]

Hello out there!

Eigentlich müssten diese auch mit gelbem Rand sein (s. Anweisung oben: *:first-child+html ul#Navigation ul { ).

Nein, es gibt nichts, was zu diesem Selektor passt. 'html' ist das Wurzelelement, nicht Kind eines anderen.

See ya up the road,
Gunnar

[patrickg]

und nun?

Nein, es gibt nichts, was zu diesem Selektor passt. 'html' ist das Wurzelelement, nicht Kind eines anderen.

[Gunnar Bittersmann]

Hello out there!

und nun?

Lass mich nachdenken
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Ich hab’s! Die Antwort ist: 42.

See ya up the road,
Gunnar

PS: Willst du außer http://de.wikipedia.org/wiki/TOFU noch etwas wissen?

[Chris]

hallo Gunnar,

ich wusste bisher garnet, dass man rein mit css sowas umsetzen kann. von daher kann ich dir auch keine tips geben.

allerdings funktioniert dein beispiel bei mir ohne probleme, sowohl für den ersten, wie auch beim überfahren des zweiten beispiel-links. der gelbe rand wird allerdings nur im IE angezeigt.

das hilft dir zwar net viel, du scheinst aber schon auf dem richtigen weg zu sein.  *hm..

viele grüße
Chris