As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself.
The trick to achieving this is by applying a negative margin. However, the challenge lies in defining the pixel amount based on the uppermost pixel of the box rather than the bottommost li item.
With a dynamic submenu and a fixed negative margin, the submenu above the main menu may end up not displaying correctly. It could appear far above or below the menu itself.
I am seeking a solution to this dilemma. I have considered three possible options, but I'm unsure how to implement any of them:
A. Calculate the negative margin value to be based on the bottom pixel of the box (similar to how distances are calculated in Photoshop with a focal point).
B. Use a dynamic option like
li:calc(<amount of list items * -23px + 20px)C. Come up with a better solution that you may have in mind. :)
Thank you!
P.S. The JSfiddle link showcasing my current setup can be found here, but please note that it is not functioning optimally: Here