✔ Zwei-zeiliges horizontales Menu ohne Dropdown

[x3n]

Hallo, ich habe ein Problem und zwar versuche ich gerade ein Menu zu erstellen, das zwei Zeilen/Ebenen hat. Die zweite Ebene soll dabei immer zu sehen sein. Also kein Hover oder Dropdown Menu.
Natürlich würde ich das am liebsten semantisch korrekt mit einer Liste machen.
Beide Zeilen sollen linksbündig beginnen.

Meine bisherige Lösung:

<ul id="headernavigation">
  <li><a href="#" target="_self">Punkt1</a></li>
  <li><a href="#" target="_self">Punkt2</a></li>
  <li><a href="#" target="_self">Punkt3</a></li>
  <li><a href="#" target="_self">Punkt4</a>
    <ul id="headernavigation">
      <li><a href="#" target="_self">Unterpunkt1</a></li>
      <li><a href="#" target="_self">Unterpunkt2</a></li>
    </ul>
  </li>
  <li><a href="#" target="_self">Punkt5</a></li>
  <li><a href="#" target="_self">Punkt6</a></li>
</ul>

ul#headernavigation {
  list-style:none;
}
	
ul#headernavigation li {
  display:inline;
}
	
ul#headernavigation li ul {
  list-style:none;
  position:absolute;
}
	
ul#headernavigation li ul li {
  display:inline;
}

Im Firefox wird die erste Zeile mit Punkt 1 bis Punkt 6 gefüllt.
Die zweite mit den Unterpunkten.
Beide sind linksbündig.

Nicht so im Internet Explorer. Die Zweite Zeile beginnt nicht links, sondern erst ab Punkt 4.

Wie kann ich dem Internet Explorer beibringen, die zweite Zeile auch von links anfangen zu lassen?

 

[Maik]

Hi,

das funktioniert so:

ul#headernavigation, ul#headernavigation ul {
  margin:0;
  padding:0;
  list-style:none;
}
ul#headernavigation {
  position:relative;
}

ul#headernavigation li {
  display:inline;
}

ul#headernavigation li ul {
  position:absolute;
  left:0;
  top:20px; /* ggfs. verringern oder erhöhen */
}

ul#headernavigation li ul li {
  display:inline;
}

mfg Maik

 

[x3n]

Super! Vielen, vielen Dank.