Max Mega Menu’s Menu Items Behavior

First of all, I want to set all the top menu items to the same width as my sub-menus which is 133px. Don’t matter the text length or even if it has sub-menus under it. I want them all to be 133px. Under the tab “MEGA MENUS” in the “MENU THEMES” Down in the “Panel Width – Mega Panel width”, I have both “OUTER WIDTH” and “INNER WIDTH” set to 133px. I’m not sure the difference between the two widths, may you can clear that up for me. Now, I don’t know if this has anything to do with it or not. It says below setting the width, “Advanced: Enter a jQuery selector to synchronize the width and position of the sub menu with existing page element (e.g. body, #container, .page)”. If this is the same issue, please tell me how th do this. A screenshot of this problem is shown in the link (My Menu 1) below.

My Menu 1

Then the other issue is text alignment. I don’t know about the top menus sense the menus expand as the text grows. Changing the top menu items to a fixed 133px, this would have to be changed as well. Right now all text is aligned to the left as you can see from the same image above. I need all the menu text to be centered. Top and sub-menus.

The next issue is the boarder [hover event] As you can see from the image below (My Menu 2),

My Menu 2

you can see the top menus are working fine, somewhat. As you can see, I’m not hovering over the top menu item “Recipe”, I.m hovering over the sub-menu “Favorite Recipe”. The boarder should not appear under the top menu “Recipe”, but under the sub-menu “Favorite Recipe” which it does not. That’s because there is no hover event in Max Mega Menu for the sub-menus boarders. I did add a boarder to the sub-menus thinking that was what I was looking for, but I was wrong. The boarder appears at the bottom of the list of sub-menus under “Meal Planner”. in the screenshot image below (Template) which is the design I used for the idea for my design, and you can see how that is set up.

Template

It doesn’t show the boarders under any of the top menus because the cursor Isn’t hovering over any, but it does have them. It does show the boarder under the sub-menu item that it’s hovering over. This is what it should be doing. (HTML5) under Code.

Then last but not lest, the shadow under the menu bar.you have shadow in Max Mega Menu for shadows for menus and sub-menus, but not for the whole bar. As you can see, I am getting close to what the template shows, that’s for the size of my menu bar, but still not quite there.

In Max Mega Menu under “MENU THEMES” in the “CUSTOM STYLING” there is the “CSS EDITOR”, may be all this can be fixed in there. I’m not sure on how to use it, or know enough code to write this. Don’t get me wrong. I know some, just not enough. If I do need to use the “CSS EDITOR”, may be you tell me what to put in there ti fix all this.

Thank You

The page I need help with: [log in to see the link]