您可以更改 jquery mega 菜单中菜单周围的左右填充，并且子菜单仍然排列吗？
我使用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；
但这里的问题是下拉菜单现在不再在菜单下正确排列。
无论如何，是否可以更改菜单按钮上的填充并仍然保持子菜单项正确排列。
I am using jquery mega menu plugin and I want to make the right and left padding a little smaller on each menu on the top menu bar.
I can go into the css and change the padding (I am using the black skin):
.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;}
to this
.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;}
NOTE: i just changed the padding above to 12px 28px 12px 15px;
but the issue here is that the dropdown menus now no longer line up properly under the menu.
Is there anyway to change the padding on the menu buttons and still keep the sub menu items lined up properly.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
更改填充不应该改变它实际排列的方式 - 插件根据子菜单的总宽度和父项的位置计算子菜单的位置。这些是您看到应用于容器的内联样式。如果可以，它将始终尝试将其居中，如果不可能，则它将左对齐子菜单。
下面的链接显示了菜单示例，其中填充减少，如您的示例所示：
http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu3.html
在这种情况下，由于宽度仅限菜单“服务”选项卡居中。其余部分与左侧对齐。您在示例中看到不同的行为吗？
Changing the padding shouldnt change the way it actually lines up - the plugin calculates the position of the sub-menu based on its total width and the location of the parent item. These are the inline styles you see being applied to the containers. If it can it will always try to center it, if this is not possible then it will left align the sub-menu.
The link below shows an example of the menu with the padding reduced as in your example:
http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu3.html
In this case, due to the width of the menu only the "Services" tab is centered. The rest are aligned agains the left side. Are you seeing different behaviour in your example?
在这种情况下，子菜单位置设置为内联。
因此，如果您如上所述更改
padding，则需要调整内联样式中的margin-left位。对于服务选项卡，将
margin-left从到
或类似的东西。然后根据需要对每个选项卡执行此操作。
注意：# 并不总是相同。你需要摆弄它。它可能大于或小于
-115pxIn this case, the sub menu position is set inline.
So, if you change the
paddingas described above, then you need to adjust themargin-leftbit in the inline styles.For the service tab, change the
margin-leftfrom<div class="sub-container mega" style="left: 429px; margin-left: -40px; top: 40px; z-index: 1000; ">to
<div class="sub-container mega" style="left: 429px; margin-left: -115px; top: 40px; z-index: 1000; ">Or something similar. Then do that for each tab as needed.
Note: the # won't always be the same. You will need to fiddle with it. It might be more or less than
-115px