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.
Here is what I have so far:
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.
Thanks in advance