I'm trying to implement this dropdown menu with flyouts:

http://jsfiddle.net/chunkymonkey/fr6x4/

In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up.

For example:

1. Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . .
2. World Music, which has as many subcategories, shows no subcategories when expanded.

(SCREENSHOT: http://i.imgur.com/0WorR.jpg)

I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code:

First change:

- var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
+ var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width(); 

Second change:

Remove:

var checkMenuHeight = function(el)
{
    if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') }; 
    el.css({ height: options.maxHeight });
};

Add:

var checkMenuHeight = function(el) 
{
    var max_height = options.maxHeight - breadcrumb.getTotalHeight();
    if (el.height() > max_height) 
    {
        el.addClass('fg-menu-scroll');
        el.height(max_height);
        topList.height(max_height);
    }
    else 
    {
        if (topList.height() < el.height()) 
        {
            topList.height(el.height());
        }
    }
}; 

But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).