Abstand Unterkategorie (Extra Navibar)

So... Wie erwartet, da bin ich wieder

Nun habe ich ein weiteres Problem mit meiner Navibar. (Hier nochmal das Forum: http://tsukiko.forumieren.com/ )

Zwischen den Unterkategorien ist ein sehr großer Abstand. Der hier: http://abload.de/img/kategorieabstandd0uic.png
Ich habe fast jeden zugehörigen CSS Code unter die Lupe genommen und habe ausprobiert wie ich diesen Abstand wieder weg bekomme. Nichts tut sich.

So wie man mich kennt übersehe ich ja viel.  

Könnte mir bitte jemand helfen diesen Fehler zu beseitigen?
Ich finde ihn einfach nicht.

LG

Ich habe es mir nun mal etwas genauer angesehen. Da das ganze ja etwas umfangreicher ist und auch noch der Hover Effekt zum Tragen kommt, ist es nicht so einfach zu sehen.
Kannst du bitte mal alle CSS Einträge, die die Navi betreffen hier einstellen?

Hier sind die CSS Einträge :

Code:

#navigation ul ul {
     top: -9999px;
     -webkit-box-shadow: 0 10px 10px #888;
     -moz-box-shadow: 0 10px 10px #888;
     box-shadow: 0 10px 10px #888;
     position: absolute;
     padding: 0;
     margin: 0;
}
 
#navigation ul li:hover ul {
     top: 17px;
}

 
#navigation ul li a {
     color: #fff;
     text-decoration: none;
}
 
#navigation ul li a:hover {
     color: #fff;
}
 
#navigation ul ul li {
     float: none;
     font-size: 15px;
     padding: 5px 10px;
     text-align: center;
     text-transform: uppercase;
     margin: 0;
     border-bottom: 1px solid #ddd;
     line-height: 15px;
  color: #fff;
  background-color: #221421;
}
 
#navigation ul ul li:hover {
     background: #221421;
     color: #fff;
}
 /*UNTERKATEGORIE LINK - KEINE HINTERGUNDFARBE*/
#navigation ul ul a {
     color: #333;
     text-decoration: none;
    background: none;
}
/*ENDE*/

/*ENDE*/



body {
 padding:5px;
 font-family: Georgia;
}

#navigation {
 width:950px;
 font-size:22px;
 position: relative;
  font-family: 'Indie Flower';
 left:0px;
}

#navigation a {
 color:#fff;
 text-decoration:none;
}

#navigation nav {
 text-transform: uppercase;
 background: #70646f;
 height:57px;
 border-left:1px solid #70646f;
 border-right:1px solid #70646f;
 z-index:3;
 position: relative;
 width:100%;
 left:-1px;
}

nav a {
 padding:4px 20px;
 border-radius:15px;
}

nav a:hover { background:#bdb3bc; }

.active-menu {
 padding:27px 40px 20px 0px;
 background-image: url(http://abload.de/img/dreieckkleinxzeh8.png);
        background-repeat: no-repeat;
  margin: 0 0 0 30px;
}

#navigation ul {
 padding:0;
 margin: 0;
 position: absolute;
 top:30%;
  margin: 0 0 0 290px;
}

#navigation ul li {
 float:left;
 list-style: none;
 margin-left:5;
  right: 0px;
}


Kannst du mir mal bitte den Teil deiner Navi geben, der den ersten Kategorielink betrifft?

Meinst du das HTML Gerüst oder den CSS Teil?

Das HTML. Ich kann hier leider nicht den Fehler finden.
Hast du hinter jedem Menüpunkt in den Untermenüs ein Zeilensprung (Enter) eingesetzt?

Nein ich habe kein Zeilensprung eingesetzt.
Ich habe das jetzt mal in dem Code so gemacht und habe bei einer Kategorie alle Leerzeichen und vermeintliche Zeilenumbrüche entfernt. Leider ist trotzdem keine Änderung vorhanden.

Hier ist der Teil des HTML Gerüsts:

Code:

<nav>
   <ul>
      <li><a href="http://tsukiko.forumieren.com/" class="active-menu">Startseite</a></li>
      <li><a href="#">Kategorie</a>
          <ul>
              <a href="#"><li>Kategorie 1</li></a><a href="#"><li>Kategorie 2</li></a><a href="#"><li>Kategorie 3</li></a><a href="#"><li>Kategorie 4</li></a>
              </ul></li>
      <li><a href="#">Kategorie</a>
          <ul>
              <a href="#"><li>Kategorie 1</li></a>
              <a href="#"><li>Kategorie 2</li></a>
              <a href="#"><li>Kategorie 3</li></a>
              <a href="#"><li>Kategorie 4</li></a>
              <a href="#"><li>Kategorie 5</li></a>
              </ul></li>
      <li><a href="#">Kategorie</a>
          <ul>
              <a href="#"><li>Kategorie 1</li></a>
              <a href="#"><li>Kategorie 2</li></a>
              <a href="#"><li>Kategorie 3</li></a>
              <a href="#"><li>Kategorie 4</li></a>
              <a href="#"><li>Kategorie 5</li></a>
              </ul></li>
   </ul>
</nav>

Kannst du bitte mal versuchen, was passiert, wenn du die Untermenüs so schreibst:

Code:

<li><a href="#">Kategorie</a>
          <ul>
              <a href="#"><li>Kategorie 1</li></a><a href="#"><li>Kategorie 2</li></a><a href="#"><li>Kategorie 3</li></a><a href="#"><li>Kategorie 4</li></a><a href="#"><li>Kategorie 5</li></a></ul></li>

Ansonsten muss es an der Zuweisung zu li liegen, das dort die Abstände so groß sind.
Das würde bedeuten, das wir die li Class neu definieren müssten und dort dann die Abstände verringern müssen.
Ich würde da dann die Class li_nav einsetzen und darüber versuchen die Abstände zu ändern.

Nein es hat leider nicht funktioniert.

Meinst du das mit der Zuweisung dann so?:

Code:

#navigation li nav {
}

Nein nicht so ganz. Wir sind noch am überlegen, wie wir hier vorgehen müssen.
So ganz sicher sind wir aber noch nicht.
Man müsste das eventuell mal in ein Testforum einsetzen um zu sehen, was man hier eventuell noch ändern kann um diesen Abstand gesondert ansprechen zu können.

Hmm, verstehe.
Erstellt ihr das Testforum oder soll ich eins erstellen und euch das PW zusenden?

Gut, wir haben eventuell eine Lösung.
Bitte ändere deinen Eintrag:

Code:

#navigation ul ul {
     top: -9999px;
     -webkit-box-shadow: 0 10px 10px #888;
     -moz-box-shadow: 0 10px 10px #888;
     box-shadow: 0 10px 10px #888;
     position: absolute;
     padding: 0;
     margin: 0;
}

Mal bitte so ab:

#navigation ul ul {
    top: -9999px;
    -webkit-box-shadow: 0 10px 10px #888;
    -moz-box-shadow: 0 10px 10px #888;
    box-shadow: 0 10px 10px #888;
    position: absolute;
    padding-top: 20px;
    margin: 0;
}

Und dann füge deinem CSS noch diesen Code hinzu:

Code:

nav li > a {
border-radius: 15px;
padding: 4px 20px;
}

Dann schauen wir mal wie sich das auswirkt.

Leider gar nichts.
Das einzige was sich verändert ist der Abstand von der Kategorie und der Unterkategorie.
Aber die Unterkategorien haben immer noch den selben Abstand von einander.

EDIT!: Ich weiß nicht ob es euch weiterhilft wenn ich euch mal den Link gebe wo ich das Menü her habe: http://www.olivergast.de/2012/04/18/css3-dropdown-menu/

Bitte entferne noch mal diesen Eintrag aus deinem CSS:

Code:

nav a {
  border-radius: 15px;
  padding: 4px 20px;
}

Der wird ja durch den Eintrag:

Code:

nav li > a {
border-radius: 15px;
padding: 4px 20px;
}

Also das erste kommt raus und der zweite bleibt so drin.

Gott Frank du bist ein Schatz!!
Vielen Vielen Dank an euch!
Alleine wäre ich da niemals drauf gekommen

Einen schönen Abend wünsche ich euch noch.

Lg,
Traice

Ich bin da auch nicht alleine drauf gekommen. Leider bin ich etwas erkältet, so das der Kopf nicht richtig arbeitet.
Danke Günther, das er mich auf den richtigen Weg gebracht hat.
Ich denke das du weitete Anpassungen nun selber noch vornehmen kannst.

Noch dazu das du da solche Probleme hast:
Der Code für die Navigation den du hier benutzt, ist nicht gerade sehr gut geschrieben. Eigentlich sollte der noch um einiges erweitert werden um bessere Classifizierungen einsetzen zu können.
Das was du hier gefunden und eingesetzt hast, ist ein Grundgerüst, das man eigentlich noch erweitern und verfeinern sollte.
Aber wenn du mit dem Ergebnis so zufrieden bist, dann ist das so auch ausreichend.