I wonder if I could trouble you for some help. I am in the process of creating the nav for a new site and am trying to achieve the following effect on hover:

If a li has a ul, this ul should gracefully expand in height downwards on hover of the parent li. But, it should also display the ul as two columns.

I have managed to get some way towards this, as show below: HTML first

CSS second

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

and demonstrated at http://jsfiddle.net/Rwthwyn/mhu1Lgy2/

HOWEVER: what is happening is that the list items are filling up the space and appearing to load one at a time. What I would like them to do is just be of a fixed height in the first place and just appear, fully formed, as they are when the ul has finished growing.

To solve this, ideally I need to not add anything to the html as the menu is going to be part of a CMS site and I am not sure how many lsit items there will end up being. However, I am open to the solution involving some js or jquery if necessary.

In case I've not explained myself very well, feel free to ask for clarification.