Создание подменю / выпадающего визуально над родителем

Я создаю меню внизу posititon:absolute; bottom:0 posititon:absolute; bottom:0, с элементами подменю, которые должны быть отлично расположены над ним родительским, в этом случае все li должны отображаться над самой ul.

Это вполне достижимо благодаря наличию margin:<negative value>, однако: количество пикселей определяется самым верхним пикселем самого окна, а не последним элементом li.

Для этого: если у вас есть динамическое подменю, как и у меня, с фиксированным отрицательным отступлением, подменю, расположенное над основным выше, будет отображаться неправильно, в любом случае выше или выше над самим меню.

Я ищу решение этого. Я думаю о трех возможных вариантах, которые я не знаю, как кодировать.
A. Отрицательное поле - это значение, которое вычисляет самый нижний пиксель окна (другими словами: внизу последнего элемента li). Как и в Photoshop, где вы можете сосредоточиться на угол окна, вычисляя расстояния до этой точки.
B. Что-то вроде li:calc(<amount of list items * -23px + 20px) - динамическая опция. Также возможно с jQuery '
C. Лучшее решение, которое вы считаете самим собой. :)

Благодарю!

Ps A JSfiddle того, что у меня сейчас есть, где вы видите, что моя текущая настройка не так хороша. :) Здесь