1

我正在使用 jquery mega menu 插件，我想在顶部菜单栏上的每个菜单上使左右填充小一点。

我可以进入 css 并更改填充（我使用的是黑色皮肤）：

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
 padding: 12px 38px 12px 25px; background: url(images/bg_black.png)
  repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

对此

.black ul.mega-menu li a {float: left; display: block; color: #fff; 
padding: 12px 28px 12px 15px; background: url(images/bg_black.png)
repeat-x 100% 0; text-shadow: 1px 1px 1px #000; text-decoration: none;}

注意：我只是将上面的填充更改为 12px 28px 12px 15px；

但这里的问题是下拉菜单现在不再在菜单下正确排列。

无论如何要更改菜单按钮上的填充并仍然保持子菜单项正确排列。

4

2 回答 2

2

更改填充不应该改变它实际排列的方式 - 插件根据其总宽度和父项的位置计算子菜单的位置。这些是您看到的应用于容器的内联样式。如果可以，它将始终尝试将其居中，如果不可能，则将左对齐子菜单。

下面的链接显示了一个菜单示例，其中填充减少了，如您的示例中所示：

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu3.html

在这种情况下，由于菜单的宽度，只有“服务”选项卡居中。其余的与左侧对齐。您在示例中看到不同的行为吗？

于 2012-02-25T01:47:16.680 回答
1

在这种情况下，子菜单位置是内联设置的。

因此，如果您padding按上述方式更改，则需要调整margin-left内联样式中的位。

对于服务选项卡，更改margin-left从

<div class="sub-container mega" style="left: 429px; margin-left: -40px; top: 40px; z-index: 1000; ">

到

<div class="sub-container mega" style="left: 429px; margin-left: -115px; top: 40px; z-index: 1000; ">

或类似的东西。然后根据需要为每个选项卡执行此操作。

注意：# 并不总是相同的。你需要摆弄它。它可能大于或小于-115px

于 2012-02-25T01:29:50.383 回答