I have a pop-up menu system (ala superfish style) called Yt Mega Menu that is installed in a Joomla web site. The standard configuration as with most menus is that when a menu item is hovered over, the sub-menu drops down. For the project I am working on, I need to alter this such that the sub-menu slides up as the menu sits at the bottom of the page.
In its hidden state, the sub-menu is positioned absolutely with a left positon of -999em. When the parent menu item is hovered over, the top is set to auto and the bottom, left, and right are all 0.
I believe I could get the desired effect if I could set the top or bottom positon for the sub-menu. The problem is that this is dependent upon the height of the sub-menu. How can I position this sub-menu above the primary menu item without knowing the height of the sub-menu?
UPDATE – See the menu at the bottom of the page http://www.affect4.net for the problem. Notice the space below the menu as well as the drop-down effect.
Thanks!
http://jsfiddle.net/DYnrE/
Just position the sub-menus absolutely at the bottom instead of at the top.