1

我很难在此处集中我的大型菜单下拉菜单：http: //drupal.scienceworld.ca

悬停时展开的下拉菜单：我应该使用 CSS 定位，还是应该调整一些 JS 行为？如果 CSS 是问题所在，随着浏览器大小的变化，我应该如何最好地将下拉菜单保持在浏览器的中心？

4

1 回答 1

0

仔细查看您的网站后，我看到您的插件正在为隐藏的 div（访问子菜单）设置一些样式：
例如，在我的 1366x780 浏览器大小中，我得到：

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

这是怎么回事：
插件计算隐藏元素的绝对位置（我认为您正在使用 qTip 插件），并且此计算基于菜单悬停项（访问本例）。

可能的解决方案：
您可以编写一个简单的 jquery 插件代码，以根据父 div 宽度水平居中 div，而不是使用该 qTip：

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;
}

像这样使用它：

$(元素).center();

注意：您应该在菜单项中的悬停事件上使用它。

于 2012-12-07T06:16:01.253 回答