Pure CSS drop downs

[sisko]

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:

http://www.hakanai.net/dd/index.htm
http://www.hakanai.net/dd/style.css

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

[BonRouge]

Put this at the top of your stylesheet:

* {
margin:0;
padding:0;
}

and this at the bottom:

#topnav {
margin-right:5em;
}
#topnav li:hover ul{
display: block;
position:absolute;
margin-top:1.5em;
margin-left:-3em;
}

and you'll be getting somewhere.

By the way, you do realise that IE6 only supports :hover on the 'a' tag, don't you?

[sisko]

Yeah, but I figured that I'd at least get the CSS right before I start working on the JavaScript.

Those said changes did fix the most problematic 'leaping text' issue. However, dynamically centering the drop down still will not cooperate.

[BonRouge]

You don't seem to have updated your page. Can we see what you have now?

[sisko]

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.