This is not a JavaScript issue; you can see the problem demonstrated yourself by viewing this simple sample page. On the sample page, a blue box and red box are defined. The blue box should have 60% opacity, while the red box should be fully opaque. Yet, because the red box is defined with a higher z-order than the blue box, it is also displayed with 60% opacity.

In HierMenus, we must display successive menus with higher z-order levels in order to ensure they appear above their parent menus. Note that if a menu is set with a specific opacity setting of less than 1.0, Safari will apply that opacity setting properly even if it does differ from the opacity settings of menus beneath them in z-order. To that end, one simple work around is to set all of your menus to a high opacity setting (like .99) by default, and then specifically set the appropriate menus to lower opacity settings. True, .99 opacity is not quite the same as 100% opacity; but visually it would be awfully difficult (if possible at all) to tell the difference; and the work around won't work with a value of 1.0 since Safari simply ignores that setting. Remember that you can set opacity conditionally, so that other browsers needn't be effected:

MenuOpacity:(HM_IsSafari)?.99:null;

This behavior was confirmed as a bug in Safari 1.1, and we'd like to thank Safari Developer Dave Hyatt for suggesting the simple work around. It was corrected in later Safari releases.