can you change the right and left padding around the menus in jquery mega menu and still have submenus line up?

Question

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.

Answer 1

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?

Answer 2

In this case, the sub menu position is set inline.

So, if you change the padding as described above, then you need to adjust the margin-left bit in the inline styles.

For the service tab, change the margin-left from

<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