Navigation untereinander

[Hansii]

Hallo.

Habe folgenden CSS Code für die Navi :

/***Hier beginnt der CSS Code für die Navigation***/
#navi{
 overflow: hidden;
 list-style: none;
 background: #232323;
}

#navi li{
 float: left;
}

#navi a:link, #navi a{
 display: block;
 padding: 2px 6px 2px 30px;
 color: #ffffff;
 text-decoration: none;
}

#navi a:visited{

}

#navi a:hover{

}

Folgender HTML Code für die Navi :

<div id="navi">
   <ul id="navi">
    <li class="has-sub"><a href="#">Home</a></li>
    <li class="has-sub"><a href="#">1. Bundesliga</a></li>
     <ul>
      <li><a href="#">Spieltage</a></li>
      <li><a href="#">Tabelle</a></li>
      <li><a href="#">Sieger</a></li>
     </ul>
    <li class="has-sub"><a href="#">2. Bundesliga</a></li>
     <ul>
      <li><a href="#">Spieltage</a></li>
      <li><a href="#">Tabelle</a></li>
     </ul>
    <li class="has-sub"><a href="#">DFB-Pokal</a></li>
     <ul>
      <li><a href="#">1. Vorrunde</a></li>
      <li><a href="#">2. Vorrunde</a></li>
      <li><a href="#">Achtelfinale</a></li>
      <li><a href="#">Viertelfinale</a></li>
      <li><a href="#">Halbfinale</a></li>
      <li><a href="#">Finale</a></li>
      <li><a href="#">Pokalsieger</a></li>
     </ul>
    <li class="has-sub"><a href="#">Europa League</a></li>
     <ul>
      <li><a href="#">Gruppenphase</a></li>
      <li><a href="#">Sechzehntelfinale</a></li>
      <li><a href="#">Achtelfinale</a></li>
      <li><a href="#">Viertelfinale</a></li>
      <li><a href="#">Halbfinale</a></li>
      <li><a href="#">Finale</a></li>
      <li><a href="#">Sieger</a></li>
     </ul>
    <li class="has-sub"><a href="#">Champions League</a></li>
     <ul>
      <li><a href="#">Gruppenphase</a></li>
      <li><a href="#">Achtelfinale</a></li>
      <li><a href="#">Viertelfinale</a></li>
      <li><a href="#">Halbfinale</a></li>
      <li><a href="#">Finale</a></li>
      <li><a href="#">Sieger</a></li>
     </ul>
    <li class="has-sub"><a href="#">Tippspiel</a></li>
    <li class="has-sub"><a href="#">Gästebuch</a></li>
    <li class="has-sub"><a href="#">Forum</a></li>
   </ul>
  </div>

So sieht Sie aus :

http://www.info-bundesliga.de/Unbenannt.png

Ich möchte aber, dass die Unterpunkte unter den Hauptpunkten sind. Wie mache ich das ?

 

[threadi]

Dein HTML-Code ist falsch.

So machst Du es:

<ul id="navi">
    <li class="has-sub"><a href="#">Home</a></li>
    <li class="has-sub"><a href="#">1. Bundesliga</a></li>
     <ul>
      <li><a href="#">Spieltage</a></li>
      <li><a href="#">Tabelle</a></li>
      <li><a href="#">Sieger</a></li>
     </ul>
</ul>

Hier ist falsch, dass innerhalb eine <ul> nur <li> vorkommen dürfen. Du schreibst hier aber <ul> innerhalb von <ul> hin. Korrekt wäre das hier:

<ul id="navi">
    <li class="has-sub"><a href="#">Home</a></li>
    <li class="has-sub"><a href="#">1. Bundesliga</a>
     <ul>
      <li><a href="#">Spieltage</a></li>
      <li><a href="#">Tabelle</a></li>
      <li><a href="#">Sieger</a></li>
     </ul>
   </li>
</ul>

Hier steht das <ul> als Unterpunkt in <li>. Dadurch kannst Du dann auch per CSS sagen, was mit solchen Unterpunkten passieren soll:

#navi li {
 position: relative;
 z-index: 1;
}
#navi ul {
 position: absolute;
 bottom: 0;
 left: 0;
}

oder je nachdem, ob Du eine ausklappbare Navigation haben willst oder nicht auch in Kombination mit der hover-Pseudoklasse.