Расширение ul двумя столбцами при наведении ⇐ Jquery

[Anonymous]

Интересно, могу ли я попросить вас о помощи? Я создаю навигацию для нового сайта и пытаюсь добиться следующего эффекта при наведении:
Если у li есть ul, этот ul должен изящно расширяться по высоте вниз при наведении курсора на родительский li. Но он также должен отображать ul в виде двух столбцов.
Мне удалось добиться этого, как показано ниже: сначала HTML

Код: Выделить всё

[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 второй

Код: Выделить всё

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;
}

и продемонстрировано на http://jsfiddle.net/Rwthwyn/mhu1Lgy2/
ОДНАКО: происходит то, что элементы списка заполняют пространство и загружаются по одному. Мне бы хотелось, чтобы они изначально имели фиксированную высоту и просто появлялись полностью сформированными, какими они являются, когда ul перестает расти.
Чтобы решить эту проблему, в идеале мне не нужно ничего добавлять в html, поскольку меню будет частью сайта CMS, и я не уверен, сколько элементов lsit там будет в конечном итоге. Тем не менее, я открыт для решения, включающего в себя использование js или jquery, если необходимо.
Если я не очень хорошо объяснил, не стесняйтесь попросить разъяснений.

Подробнее здесь: https://stackoverflow.com/questions/340 ... s-on-hover