[phpBB2] Dropdown-Menü

Huhu.

Ich bastel gerade vor mich hin, ein bisschen was ausprobieren etc. Ich habe eine zusätzliche Box auf der Index hinzugefügt und möchte in dieses nun ein Dropdownmenü einfügen, welches zu den Teamgruppen und zu den einzelnen Teammitgliedern verlinkt. Also nicht auf einmal, das wär ja schwachsinnig, hab mal ne Zeichnung gemacht.
http://abload.de/img/unbenanntwbsdf.png

Code:

[b]<!-- BEGIN teamBox_on_index -->
<table class="teamBox" width="100%" border="2px">
   <tr>
      <th class="teamBoxHead" height="20px">Das Team</th>
   </tr>
   <tr>
      <td class="teamBoxInner" height="200px">
         <div id='teamMenu'>
            <ul>
               <li class='admins'><a href='#'><span>Admins</span></a>
                  <ul>
                     <li><a href='#'><span>Haselnussfeder</span></a></li>
                     <li><a href='#'><span>Vanilleblatt</span></a></li>
                     <li class='last'><a href='#'><span>Wolfsherz</span></a></li>
                  </ul>
               </li>
               <li class='mods'><a href='#'><span>Mods</span></a>
                  <ul>
                     <li class='last'><a href='#'><span>Jubelschrei</span></a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </td>
   </tr>
</table>
<!-- END teamBox_on_index -->[/b]

Das ist das, was ich ins Template geschrieben habe (an der richtigen Stelle, wenn ich statt des <div> </div> Krams nur Text schreibe, wird die Box dort angezeigt, wo sie hin soll.

Code:

#teamMenu ul {
  margin: 0;
  padding: 0;
}
#teamMenu li {
  margin: 0;
  padding: 0;
}
#teamMenu a {
  margin: 0;
  padding: 0;
}
#teamMenu ul {
  list-style: none;
}
#teamMenu a {
  text-decoration: none;
}
#teamMenu {
  height: 70px;
  background-color: #232323;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#teamMenu > ul > li {
  float: left;
  margin-left: 15px;
  position: relative;
}
#teamMenu > ul > li > a {
  color: #a0a0a0;
  font-family: Verdana, 'Lucida Grande';
  font-size: 15px;
  line-height: 70px;
  padding: 15px 20px;
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}
#teamMenu > ul > li > a:hover {
  color: #ffffff;
}
#teamMenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#teamMenu > ul > li:hover > ul {
  opacity: 1;
  top: 65px;
  visibility: visible;
}
#teamMenu > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#teamMenu > ul ul > li {
  position: relative;
}
#teamMenu ul ul a {
  color: #323232;
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: #fafafa;
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
#teamMenu ul ul a:hover {
  background-color: #f0f0f0;
}
#teamMenu ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#teamMenu ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#teamMenu ul ul a:hover {
  background-color: #8db4cd;
  color: #f0f0f0;
}

Und das zugehörige CSS.

Ich habe es bereits mehrfach überprüft und bis auf ein paar Schönheitsfehler nichts gefunden, keine ungeschlossenen Tags oder Schreibfehler.

Bin ich so vom Gedankengang her auf der richtigen Fährte? ~

Hallo,

du findest hier über die Suchfunktion einige Themen dazu, vor allem aber über Google unzählige Websites, die Codes für solche Dropdown-Menüs frei anbieten.

Falls du deinen Code selbst geschrieben hast, kannst du diese fertigen Codes verwenden, was viel einfacher ist und einen Erfolg sicherstellt.
Falls du den Code nicht selbst geschrieben hast, kannst du hier zumindest die Quelle nennen und wir können uns mal ein Bild davon machen, ob dieser Code grundsätzlich mit Forumieren-Foren kompatibel ist und ob du Umsetzungsfehler gemacht hast.
Aber ohne all das zu wissen, können wir uns deinen Code nicht im Detail ansehen - das wäre weder sinnvoll noch würde es dich schneller dem Ziel näherbringen.

Liebe Grüße
Günther

Ich hab ihn selber geschrieben, aus dem einfachen Grund, da es mir hierbei nicht um das Ergebnis selber geht, sondern um den Weg. Ich möchte das gerne selber gemacht haben, denn Codes kopieren und einfügen kann jeder und selbst Farbcodes darin austauschen kann man auch ohne HTML-Kenntnisse.
Ich möchte aus dem, was ich mache, halt etwas lernen. ~

Das finde ich sehr gut, so bist du tatsächlich auf dem richtigen Weg, "learning by doing" zu betreiben!  

Da es sich in diesem Fall aber um kein Supportthema handelt, sondern um ein allgemeines Codingthema, verschiebe ich es nach "Allgemeine Diskussionen".

Noch ein Hinweis: In diesem Fall geht es in erster Linie darum, ob dein HTML- und CSS-Code zum gewünschten Effekt führt. Wenn das sichergestellt ist, kann es beim Einsetzen in dein Forum eigentlich keine Probleme mehr geben.
Denkst du also nicht, dass du in einem HTML-/CSS- bzw. Webdesign-Forum am besseren Ort wärst? Denn dort geht es - im Gegensatz zu diesem Support - wirklich darum, coden zu lernen und eigene Codes gemeinsam auszubessern und funktionsfähig zu machen.

Ich hab die Frage einmal in dem Webtechnik Forum meines Vertrauens gestellt, heißt aber nicht, dass hier nicht auch Antworten kommen dürfen *husthusthust*. :3 ~