Вертикальное многоуровневое меню, как прикрепить блок с подкатегориями к верху?

Здравствуйте.

Вертикальное многоуровневое меню на подобие сайта днс.

Наводим мышку на каталог, на один из разделов, вылезает блок с подкатегориями, там 2-3-4-5-6 уровни категорий.

Всплывающий блок с подкатегориями вылезает на уровни родительской категории.

Я хочу реализовать чтобы блок с подкатегоориями вылезал всегда с верху от начала самого меню.

Пощупать меню можно тут: https://jsfiddle.net/63yxg24z/12/

Стили которые отвечают за вывод блока в котором подкатегории.

.sky-mega-menul li > div {

  position: absolute;

  z-index: 9000;

  top:100%;

  left: -9999px;

  opacity: 0;

  -o-transform-origin: 0% 0%;

  -ms-transform-origin: 0% 0%;

  -moz-transform-origin: 0% 0%;

  -webkit-transform-origin: 0% 0%;

  -o-transition: -o-transform 1.0s, opacity 1.0s;

  -ms-transition: -ms-transform 1.0s, opacity 1.0s;

  -moz-transition: -moz-transform 1.0s, opacity 1.0s;

  -webkit-transition: -webkit-transform 1.0s, opacity 1.0s;

}

.sky-mega-menul li:hover > div{

top: 0;

left: 271px;

opacity: 1;

-webkit-transform: translate(0, 0);

background: #fff;

border-left: 8px solid #7D7E7F;

padding: 20px 20px 13px 20px;

width: 881px;

min-height: 488px;

max-height: 800px;

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

Приведу примеры на скринах.

Щас так:

Я хочу реализовать так: ( растянуть подменю от верха каталога и до низа каталога. )