Форумы портала PHP.SU :: Выдающее вертикальное меню по центру относительно родителя

Доброго всем времени суток!

У меня есть вертикальное меню, которое расположено слева. При наведении на пункты меню - справа появляется выпадающее подменю. В данный момент, это выглядит так:

Нажмите для увеличения

Как видите, верхний край подменю совпадает с верхним краем пункта меню и подменю выпадает вниз, относительно родителя.

Мне нужно сделать, чтобы подменю стояло по центру относительно родителя, т.е. так, как показано на данном примере:

Нажмите для увеличения

Сами пункты меню могут иметь разную высоту, но не меньше 70px

Подскажите, пожалуйста, как это можно сделать? Код действующих элементов меню следующий:

HTML

CODE (html):
скопировать код в буфер обмена

 
<div class="leftmenu">
    <div class="menu">
         <ul>
               <li>
                     Пункт меню
 
                     <ul>
                          <li>Пункт подменю</li>
                          <li>Пункт подменю 2</li>
                     </ul>
               </li>
         </ul>
    </div>
</div>
 

CODE (html):
скопировать код в буфер обмена

 
/* ПУНКТЫ МЕНЮ:  */
.leftmenu .menu ul a li {
    position: relative;
        display: table;
        width: 320px;
        font-size: 16px;
        color: #fff;
        clear: both;
        padding-right: 20px;
        min-height: 70px;
}
 
 
 
/* ВЫПАДАЮЩЕЕ ПОДМЕНЮ:  */
.leftmenu .menu ul a li > ul {display: none;}
 
.leftmenu .menu ul a li:hover > ul {
    display: block;
    background: #fff;
    z-index: 9999;
    width: 750px;
    color: #000;
    position: absolute;
    top: 0px;
    left: 340px;
    padding: 30px 40px;
}
 

(Отредактировано автором: 17 Октября, 2016 - 15:14:49)