Lesson 2: Set custom panel heading and sub-panel widths,
then position the sub-panels

Custom Sub-Menu Widths and Positioning

Here is the markup for the first sub-menu panel (with text content truncated):

<div id="p7EPMc1_1" class="p7epm_content pan1">
<p>Lorem ipsum dolor...</p>
</div>

Each panel is assigned a custom class. p7epm_content pan followed by a second class that corresponds to the order of your panels—so p7epm_content pan1 is the first sub-menu, p7epm_content pan2 is the second, and so on.

We've included these classes (for 5 sub-menus) in each of the Megavator style sheets:

.p7EPM53 .p7epm_content.pan1 {}
.p7EPM53 .p7epm_content.pan2 {}
.p7EPM53 .p7epm_content.pan3 {}
.p7EPM53 .p7epm_content.pan4 {}
.p7EPM53 .p7epm_content.pan5 {}

Tip: Should you have more than 5 sub-menus, simply add .p7EPM53 .p7epm_content.pan6 {}, and so on to your style sheet.

Let's add a custom width to the first sub-menu.

In your CSS Styles panel, select .p7EPM53 .p7epm_content.pan1

Click the Add Property link and select width

In the value column enter 300 and px for the unit of measure.

Now let's add a custom width to the second sub-menu and let's also position it so that it starts at the left edge of its heading.

Set the width to 300px

As for positioning, we'll use the margin-left property and set it to 113px.

We arrived at 113px because the first heading (#p7EPMtrg1_1) was set to 112px and it has a 1px right border, making the box model width 113.

Let's quickly finish up. Select each of the 3 remaining sub-menu panel classes in your CSS Styles panel and assign a width and a margin-left as follows:

.p7EPM53 .p7epm_content.pan3 {
width: 300px;
margin-left: 226px;
}
.p7EPM53 .p7epm_content.pan4 {
width: 300px;
margin-left: 406px;
}
.p7EPM53 .p7epm_content.pan5 {
width: 300px;
margin-left: 586px;
}

All sub-menu panels are lining up perfectly, but we have a slight problem with the last 2. Sub-menu panel 4 ends several pixels short of the layout and Sub-menu panel 5 goes well beyond the layout boundary.

We'll fix this by increasing the width of Sub-menu panel 4 and decreasing the margin-left value for Sub-menu panel 5.

For sub-menu panel 4, change the width to 306px

.p7EPM53 .p7epm_content.pan4 {
width: 306px;
margin-left: 406px;
}

For sub-menu panel 5, change the width to 306px and the margin-left value to 406px

.p7EPM53 .p7epm_content.pan5 {
width: 306px;
margin-left: 406px;
}

That's better.

Preview in a browser.

Looking very good.

Now let's learn how to enter and style sub-panel content in Lesson 3

• Lesson 1: Establish an insertion point, create a Megavator Menu, modify the menu, edit font styles.
• Lesson 2: Set custom panel heading and sub-panel widths, then position the sub-panels.
• Lesson 3: Adding and Styling Sub-Menu Panel Content.
• Lesson 4: Making a Vertical Megavator.