Dropdownmenü - Nur eine Spalte, nicht fünf...

[Lischen2209]

Hallo!

Ich bastel gerade an einem Dropdown-Menü herum, allerdings will das gute Teil nicht so wie ich will... Anstelle fünf kleine Submenüs unter den jeweiligen Punkten auszuklappen, klappt es nur ein Submenü aus, dass so breit ist wie das Menü selbst und die Links werden immer unter Startseite angezeigt.
Ich füge hier mal die beiden Codes ein, könnte mir bitte jemand sagen, was ich falsch gemacht habe, ich werkel jetzt schon seit zwei Stunden daran rum und es wird nicht besser, immer nur schlimmer... :(
Wäre echt lieb... !

HTML:

<div id='dropdownmenu'> <!-- Dropdown-Navigation (unvollständig) -->
<ul>
<li><a href='#'>Startseite</a>
<ul>
<li><a href='#'>News</a></li>
<li><a href='#'>Veranstaltungen</a></li>
</ul>
</li>
<li><a href='#'>Aktuelles</a>
<ul>
<li><a href='#'>J1</a></li>
<li><a href='#'>J2</a></li>
<li><a href='#'>M1</a></li>
</ul>
</li>
<li><a href='#'>Tabellen</a>
<ul>
<li><a href='#'>Kreisliga J1</a></li>
<li><a href='#'>Derbys J2</a></>
<li><a href='#'>Kreisliga M</a></li>
</ul>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='#'>Zeiten</a></li>
<li><a href='#'>Trainer</a></li>
<li><a href='#'>Anmeldung</a></li>
<li><a href='#'>Informationen</a></li>
<li><a href='#'>Teams</a></li>
</ul>
</li>
<li><a href='#'>Topic 5</a>
<ul>
<li><a href='#'>Bla</a></li>
<li><a href='#'>Blup</a></li>
</ul>
</li>
</ul>
</div>

CSS:

#dropdownmenu {
background-color: #93c716;
padding: 0;
position: relative;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
margin: 0px auto;
font-size: 16px;
border-radius: 12px;
height: 40px;
width: 940px;
border-bottom: 10px solid #88b914;
}
#dropdownmenu a {

background: #93c716;
color: #164602;
padding: 0 20px;
display: block;
line-height: 1.5em;
text-decoration: none;
}
#dropdownmenu ul {

list-style: none;
float: left;
position: relative;
z-index: 597;
}
#dropdownmenu li {
list-style: none;
}
#dropdownmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#dropdownmenu ul li.hover, #dropdownmenu ul li: hover {
position: relative;
z-index: 599;
cursor: default;
}
#dropdownmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
bottom: 0;
left: 0;
margin-top: 0;
z-index: 598;
width: 100%;
}
#dropdownmenu ul ul li {
float: none;
font-weight: normal;
}
#dropdownmenu ul ul a {
background: #93c716;
color: #000;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-top: 0 none;
border-radius: 2px;
line-height: 100%;
padding: 6px 10px;
}
#dropdownmenu > ul {
*display: inline-block;
}
#dropdownmenu > ul > li {

float: left;
}
#dropdownmenu ul li:hover > ul {
visibility: visible;
}
#dropdownmenu ul ul ul {
top: 0; left: auto; right: -99.5%;
}
#dropdownmenu:after, #dropdownmenu ul:after {
display: block;
clear: both;
}
#dropdownmenu > ul > li > a {
line-height: 20px;
}
#dropdownmenu ul ul li.has-sub >a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px
}
#dropdownmenu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#dropdownmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#dropdownmenu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#dropdownmenu ul ul li:hover > a {
background: #35a6ff;
}
#dropdownmenu ul li:hover > a, #dropdownmenu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#dropdownmenu ul li.has-sub > a:after {
margin-left: 5px;
}
#dropdownmenu ul li.last ul {
left: auto;
right: 0;
}
#dropdownmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}

Sorry, dass es so unstrukturiert ist, stört mich selbst bisschen, weiß aber nicht, wie ichs sinnvoll ordnen könnte, dass es übersichtlicher wird...
Wäre lieb wen jemand drüberkucken könnte... :)))

Dankeschön!
Lischen2209

 

[Tronjer]

Ich schau da jetzt nicht drüber, zumal das Script, wie du selber einräumst, unstrukturiert ist. Aber ich gebe dir zwei Tipps: Bevor du fünf Menüpunkte mit viel unübersichtlichem Code schreibst, baue erst mal einen, und wenn der funktioniert, kannst du ihn duplizieren. Außerdem hatte ich in diesem Thread anhand einer bewusst einfach gehaltenen Beispielnavigation die Sache erläutert. Schaue dir das mal an, und melde dich, falls du damit nicht weiterkommst.

http://www.html.de/css/41038-horizontale-navigationsleiste.html

 

[Lischen2209]

Vielen Dank, ich schau mal in deinen Link...! :)