Zweite Menüebene neben erste plazieren

Ein ganz einfaches (korrekt verschachteltest) Menü:

<ul>
<li><a href="#">Seite eins</a></li>
<li><a href="#">Seite zwei</a>
  <ul>
    <li><a href="#">Seite zwei.eins</a></li>
    <li><a href="#">Seite zwei.zwei</a></li>
  </ul>
</li>
<li><a href="#">Seite drei</a></li>
<li><a href="#">Seite vier</a></li>
</ul>

Die zweite Ebene des Menüs soll rechts neben den jeweils Menüpunkt der ersten Ebene plaziert werden. In diesem Fall ist es ein Textmenü, natürlich kann man das gleiche CSS für Grafiken innerhalb der Listenelemente verwenden. Und hier das CSS und wie man darauf kommt.

Damit man später absolute Positionierung verwenden kann, muss man bei dem Hauptelement die Positionierung auf relative setzen, die Breite von 160px wurde hier einfach so gewählt. Beim untergeordneten Listenelement wird die Positionierung erneut auf relative gesetzt. Dadurch verändert sich erstmal nichts. Die zweite Ebene des Menüs wird nun über position:absolute aus dem Layout herausgelöst und rechts positioniert. Die Angabe absolut bezieht sich auf ein übergeordnetes Element, das relativ positioniert ist (deswegen ist die Angabe von position:relative bei den li-Elementen notwenig).

ul {
  position: relative;
  list-style: none;
  width: 160px;
}
li {
  width: 100px;
  position: relative;
}
ul ul {
  position: absolute;
  top: 0;
  left: 150px;
}

Mit ein paar zusätzlichen Angaben (wie margin:0 und padding: 0) läßt sich ein Menü generieren wie hier: amelinghausen.de