IE 6 and drop down menu issues

[trancehead]

I am currently using whatever:hover to simulate a drop down in IE 6 for my site. It has worked wonderfully up until recently. I have had to make the menu options more flexible at the top because of different languages and so needed to remove the width of each <ul> element.

This works just fine in FF and IE 7 but as usual IE 6 has to ruin the party

The menu drops down correctly but as soon as one starts hovering over an item with a sub menu it disappears. Also there appears to be some sort of extra margin underneath the horizontal line of menu items and in some scenarios when I hover over the drop down menu a clear margin appears under that item as well which is probably the reason it disappears.

The working, fixed width version is here: http://www.cybercellar.co.za but if you go to http://www.cybercellar.dk (the menu is in Danish) you will notice the horrible spacing because of the fixed width.

At the moment the non-working version is at http://www.tastesouthafrica.co.za/South%20Africa or http://www.tastesouthafrica.co.za/Denmark/ (For the danish site).

Any help is appreciated as I'm pulling my hair out on this one.

[holyhttp]

The top level links are not properly aligned in IE7 as well. My suggestion:
#menu ul li{
display: inline; margin:0; padding:0; position:relative; top:0px; left:0px;
}
/* feel free to modify the alignment with top, left */
#menu ul li a{
display: block; font-weight:bold; padding:5px; margin:0; height:20px; width:100px;
}
/* you can specify more style rules for the color and font-family of the top links as well as the width.
you can have a more specific width for each language by having a small css that overides the general rules. Same css file name but in a language specific folder.
*/

#menu ul li ul{
position:absolute;
top:20px; /* adjust to display just below corresponding top link without any vertical gap */
left:0px;
width:135px;
margin:0;
padding:0px;
display:none;
z-index:100;
border: solid 1px #939E52 /* draw a border around sub-menu */
}
#menu ul li ul li{
margin:0;
padding:0;
width:100%
}

/* you should give each pop-up menu (i.e #menu ul li ul ) a unique ID so you can specify the width for each one of them and not have the same with for all.
To prevent the sub menu from disappearing on hover, set the margin to 0 for all links in submenus i.e

#menu ul li ul li a{
display:block;
width:100%;
margin:0;
padding:2px;
border-bottom: solid 1px #939E52; /* separator for sublinks */
}

This should solvew most of the issues mentioned above.

[trancehead]

thanks Holyhttp, it seems I found a solution that worked for me. If I find any bugs in it I'll definitely give your solution a go.