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

У меня возникла проблема с созданием выпадающего меню с изображениями. Я пытаюсь получить выровненный по центру горизонтальный список с элементами главного меню и соответствующими вертикальными меню.

Это мой код кода CSS:

#nav {
    position: relative;
    top: 88px;
    padding: 0px;
    border: 0px;
    min-width: 800px;
    z-index: 999;
    font-size: 0px;
}

#nav > ul {
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    padding: 0 0 0 0;
}

#nav >ul> li> ul {
    width: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#nav> ul >li >ul> li {
    display: block;
    padding: 0px;
}

Код JQuery:

$("#nav img").mouseover(function () {
  //$('ul .subList').hide();            
  var imgSrc = $(this).attr("src");
  var tempSrc = imgSrc.split(".png");
  var newSrc = tempSrc[0] + "Hover.png";
  $(this).attr("src", newSrc);
  $(this).closest('li').children('ul .subList').slideToggle();
});

Где nav - это div, содержащий список. Все элементы списка являются изображениями.

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

Eg:

Должно быть: (желательно)

Пункт 1 Пункт 2 Sub1a Sub1b

Становится: (Текущий выход)

Item1 Sub1a Sub1b Item2