Drop-down submenus overlap, how do I fix this?

Question

I rendered this menu with Superfish and the Supersubs plugin:

As you can see, the submenu that originates from parent "Long long long submenu item" isn't positioned correctly. I know what I need to do, but not how to execute it.

First, I need to know the width of the parent menu. I then need to set the submenu's left attribute to that width + 5px (I used padding) + 1px (so that the parent menu and submenu are not directly connected to each other). How do I do this for all menu items?

Keep in mind that the width of a menu is not fixed, since Supersubs adjusts the width to the longest item.

Answer 1

I'm close...

$("ul#menu > li > ul ul").each(function() {
    $(this).css("left", $(this).parent().parent().width() + 5 + 1);
});