Question

I’m having difficulty centering my mega menu dropdown here:
http://drupal.scienceworld.ca

The dropdown that unfolds on hover: should I position using CSS, or is there some behaviour of JS that I should be tweaking instead? If CSS is the issue, how should I best keep that dropdown centred in the browser as browser size changes?

Answer 1

After take a closed look to your site, I see your plugin is setting some styles for the hidden div (the visit submenu):
For example in my 1366×780 browser size I got:

position: absolute;
width: 960px;
display: none;
top: 158px;
left: 580.5px;

This is what is going on:
The plugin calculate the absolute position for the hidden element (I think you are using qTip plugin), and this calculation is based on the menu hovered item (visit on this case).

Possible Solution:
Instead of using that qTip, you can write a simple jquery plugin code for horizontally center the div based on the parent div width:

jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("display", "visible"
   this.css("top", "158px");
   this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft()) + "px");
   return this;
}

Use it like this:

$(element).center();

Note: You should use this on hover event in the menu item.