✔ Problem mit Liste als Menu

[x3n]

Folgendes.
Ich will ein Menu. Wenn man auf bestimmte Buttons klickt soll ein Untermenu aufpoppen.
Kein Problem dachte ich mir und hab das ganze folgendermassen gelöst:

CSS-Code:

  ul#hauptmenu {
  padding:8px 0 0 0;
  margin:5px 0 10px 0;
  list-style-type:none;
  }
  
  #hauptmenu li {
  padding:2px 0 0 0;
  border-bottom:1px solid #cccccc;
  }
  
  #hauptmenu a {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 0.5em;
  text-decoration:none;
  color:#849daa;
  font-weight:bold;
  border-left:0.5em solid #42697d;
  }
  
  #hauptmenu a:hover {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 0.5em;
  text-decoration:none;
  color:#e3e9ec;
  border-left:0.5em solid #1a455b;
  }
  
  #hauptmenu a.aktiv {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 0.5em;
  text-decoration:none;
  color:#e3e9ec;
  border-left:0.5em solid #1a455b;
  }
  
  ul#untermenu {
  padding:0 0 0 0;
  margin:5px 1px;
  list-style-type:none;
  border-left:1px solid #cccccc;
  border-right:1px solid #cccccc;
  border-bottom:0;
  }
  
  #untermenu li {
  padding:1px 0;
  border:0
  }
  
  #untermenu a {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#849daa;
  font-weight:normal;
  border:0;
  }
  
  #untermenu a:hover {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#1a455b;
  font-weight:bold;
  border:0;
  }

HTML-Code:

    <ul id="hauptmenu">
      <li><a href="#">Link1</a></li>
      <li><a class="aktiv" href="#">Link2</a></li>
        
        <ul id="untermenu">
          <li><a href="#">Unterlink1</a></li>
          <li><a href="#">Unterlink1</a></li>
          <li><a href="#">Unterlink1</a></li>
        </ul>
          
      <li><a href="#">Link3</a></li>
      <li><a href="#">Link4</a></li>
      <li><a href="#">Link5</a></li>
    </ul>

Das Problem ist nun dass es nicht valide ist, wenn es verschachtelte <ul>-Tags gibt.
Dann wollte ich aus der id vom untermenu einen Div-Container machen, ist jedoch innerhalb eines <ul>-Tags auch nicht erlaubt.
Also hab ich folgendes probiert:

HTML-Code:

    <ul id="hauptmenu">
      <li><a href="#">Link1</a></li>
      <li><a class="aktiv" href="#">Link2</a></li>
    </ul>
        
        <ul id="untermenu">
          <li><a href="#">Unterlink1</a></li>
          <li><a href="#">Unterlink1</a></li>
          <li><a href="#">Unterlink1</a></li>
        </ul>

    <ul id="hauptmenu">
      <li><a href="#">Link3</a></li>
      <li><a href="#">Link4</a></li>
      <li><a href="#">Link5</a></li>
    </ul>

Ist auch nicht erlaubt, weil die selben id's nicht 2 mal vorkommen dürfen.

Dann wollte ich classes draus machen und dann sieht das Ergebniss total komisch aus. So als ob die informationen von ".untermenu a {}" gar nicht übernommen werden.
Kann mir einer helfen? Ganz zur not mach ich 2 verschiedene id's fürs Hauptmenu... is aber nicht gerade die eleganteste Lösung.

 

[Maik]

Eine verschachtelte Listennavigation wird folgendermassen notiert:

<ul>
 <li><a href="#">link 1</a>
  <ul>
    <li><a href="#">sublink 1.1</a></li>
  </ul>
 </li>
</ul>

 

[x3n]

So schnell kann man einen Menschen glücklich machen. Dankeschön!