I have finally decided to bite the bullet and create a Pure CSS drop down menu system. I've spent countless hours trying to convert existing designs such as Suckerfish and Hybrid drop downs to suit my needs, only to fail miserably.
So I decided to start from scratch and write the code myself. I've gotten the furthest I ever have with this method, but have 2 hang ups.
The drop downs work, but when you hover over the parent menu, it leaps over to the left for some reason. I've tried adjusting every margin and padding I can think of, but have yielded no results. Obviously, the jumping is intolerable. Does anyone know what is going on and/or have suggestions to fix it?
Also, is there a dynamic way to center the sub menu underneath its particular parent menu? I can achieve this with absolute positioning and fixed font sizes, but I want to avoid absolutes if at all possible.
I should also note that if I do use absolute position to force the sub menu further left than it's parent, the parent still leaps left.
As a final reference, I am aiming for something similar to Design Snack's 'hungry' menu. Rather instead of displaying the sub menu above the parent menu, I want it below. Also, I'd like to keep everything semantic. The 'hungry' menu is only one list item. I'd like to keep all of my sub menus individual list items if possible.
Reuploaded. I made a few minor changes in your suggestions to better suit my needs.
As for the dynamic centering, I can't figure out a way to do it at all, and I'm starting to think that there isn't a way to do it with purely modern CSS. Since the size of the parent and sub menus are variable, it isn't possible to hardcode values. Since CSS can't process equations (whatever happened to PSL anyway?) I'm at a loss.
What I can do is simply align the left margins of the parent and sub menus. It doesn't provide the same visual effect, however it retains the functionality while minimizing the breakage at large text sizes.