您可以在jquerymega菜单中更改菜单的左右填充，并且仍然有子菜单排成一行吗

Question

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

我可以进入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；

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

是否可以更改菜单按钮上的填充并保持子菜单项正确排列。

Answer 1

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

下面的链接显示了一个减少填充的菜单示例：

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

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

Answer 2

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

因此，如果如上所述更改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 或多或少