Beim Schweben wird ul mit zwei Spalten erweitert ⇐ HTML

[Anonymous]

Ich frage mich, ob ich Sie um Hilfe bitten könnte. Ich bin gerade dabei, die Navigation für eine neue Site zu erstellen und versuche, den folgenden Effekt beim Schweben zu erzielen:
Wenn ein Li ein UL hat, sollte sich dieses UL beim Schweben des übergeordneten Li elegant nach unten in der Höhe ausdehnen. Es sollte aber auch die UL als zwei Spalten anzeigen.
Ich habe es geschafft, dies irgendwie zu erreichen, wie unten gezeigt: HTML zuerst

Code: Select all

[list]
[*][url=#]Home[/url]
[*][url=#]About[/url]

[url=#]Sub Link 1[/url]
[*][url=#]Sub Link 2[/url]
[*][url=#]Sub Link 3[/url]
[*][url=#]Sub Link 4[/url]
[*][url=#]Sub Link 5[/url]
[*][url=#]Sub Link 6[/url]
[*][url=#]Sub Link 7[/url]
[/list]

[*][url=#]Top Link[/url]
[list]
[url=#]Sub Link 1[/url]
[*][url=#]Sub Link 2[/url]
[*][url=#]Sub Link 3[/url]
[*][url=#]Sub Link 4[/url]
[*][url=#]Sub Link 5[/url]
[*][url=#]Sub Link 6[/url]
[*][url=#]Sub Link 7[/url]
[/list]

[*][url=#]News[/url]
[list]
[url=#]News Item 1[/url]
[*][url=#]News Item 2[/url]
[*][url=#]News Item 3[/url]
[*][url=#]News Item 4[/url]
[*][url=#]News Item 5[/url]
[*][url=#]News Item 6[/url]
[*][url=#]News Item 7[/url]
[*][url=#]News Item 8[/url]
[/list]

[*][url=#]Contact[/url]

CSS-Sekunde

Code: Select all

header {
border-bottom: 1px solid #c6c8c9;
height: 35px;
width: 100%;
}
header nav {
margin: 0;
position: absolute;
right: 0;
top: 0;
}
header nav ul {
list-style: none;
margin: 0;
text-transform: lowercase;
width: auto;
position: relative
}
header nav li {
float: left;
margin: 0;
}
header nav li a {
font: 18px/1 'Arial';
height: 23px;
display: block;
padding: 7px 10px 14px;
}
header nav li:first-child a {
padding: 7px 10px 14px 0;
}
header nav li:last-child a {
padding: 7px 0 14px 10px;
}
header nav li:nth-child(2):hover,
header nav li:nth-child(3):hover,
header nav li:nth-child(4):hover {
margin: -1px -1px 0 -1px;
border: 1px solid #c6c8c9;
border-bottom: 1px solid white;
border-radius: 5px 5px 0 0;
}
header nav a:link,
header nav a:visited,
header nav li:hover,
header nav li:active {
text-decoration: none;
}
header nav li ul{
background: #fff;
position: absolute;
top: 44px;
width: 504px;
-webkit-transition: max-height 0s;
-moz-transition: max-height 0s;
-ms-transition: max-height 0s;
-o-transition:max-height 0s;
transition: max-height 0s;
overflow: hidden;
max-height: 0
}
header nav li ul li {
float: none;
}
header nav li:hover ul {
max-height: 155px;
border: 1px solid #c6c8c9;
border-width: 0 1px 1px;
padding: 4px 0 10px;
-webkit-transition: max-height 0.6s;
-moz-transition: max-height 0.6s;
-ms-transition: max-height 0.6s;
-o-transition:  max-height 0.6s;
transition: max-height 0.6s;
height: 140px;
column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
-webkit-column-count: 2;
column-gap: 0;
-moz-column-gap: 0;
-ms-column-gap: 0;
-o-column-gap: 0;
-webkit-column-gap:0;
}
header nav li ul {
right: 0;
}
header nav li ul li:hover {
border: none !important;
margin: 0 !important;
}
header nav li ul li a {
font: 16px/35px 'Arial';
opacity: 0;
height: 35px;
padding: 0 0 0 5px !important;
left: 0;
position: static;
border-left: 6px solid white
}
header nav li:hover ul li a {
opacity: 1;
transition: opacity 0.6s;
}
header nav li ul li:nth-child(1) a:hover,
header nav li ul li:nth-child(8) a:hover {
border-left: 6px solid #c4004b;
}
header nav li ul li:nth-child(2) a:hover {
border-left: 6px solid #a7b600;
}
header nav li ul li:nth-child(3) a:hover {
border-left: 6px solid #ef9b00;
}
header nav li ul li:nth-child(4) a:hover {
border-left: 6px solid #5d406c;
}
header nav li ul li:nth-child(5) a:hover {
border-left: 6px solid #64884c;
}
header nav li ul li:nth-child(6) a:hover {
border-left: 6px solid #da6700;
}
header nav li ul li:nth-child(7) a:hover {
border-left:6px solid #a03264;
}

und demonstriert unter http://jsfiddle.net/Rwthwyn/mhu1Lgy2/
JEDOCH: Was passiert, ist, dass die Listenelemente den Platz füllen und scheinbar einzeln geladen werden. Was ich möchte, ist, dass sie zunächst nur eine feste Höhe haben und einfach so erscheinen, wie sie sind, wenn das ul fertig gewachsen ist.
Um dieses Problem zu lösen, muss ich im Idealfall nichts zum HTML hinzufügen, da das Menü Teil einer CMS-Site sein wird und ich nicht sicher bin, wie viele lsit-Elemente es am Ende geben wird. Ich bin jedoch offen für die Lösung, die bei Bedarf einige js oder jquery einbezieht.
Falls ich mich nicht sehr gut erklärt habe, können Sie gerne um Klarstellung bitten.