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