• Home
• Section 2
  • Link 2.1
  • Link 2.2
    • Link 2.2.1
    • Link 2.2.2
    • Link 2.2.3
  • Link 2.3
• Jobs
  • Link 3.1
  • Link 3.2
  • Link 3.3
• Roaring Red Fire Trucks

variable width root menu items

Since Pop Menu Magic is built with CSS, almost anything is possible. While most style modifications are simply a matter of editing menu styles in Dreamweaver's CSS editor, there may be rare occasions where you need to alter the structure of a menu. This is one of them.

To set the root-level menu items to varying widths, each root-level link <a> must be assigned an ID. The IDs are then used as selector names for new style rules that define a specific width property.

The widths should be set in ems so that when text is resized, the top-level menu items will not wrap to two (or more) lines.

The style modifications are embedded in this document and look like this:

/*
menu modifications
cancel menu CSS width setting
*/
#p7PMnav li {width: auto;}

/*
Change padding to ems so we can calculate total width
*/
#p7PMnav a {padding: 4px 1em;}

/*
top-level width styles.
Because the width is in ems, it will need to be adjusted
based on any font size settings you may make.

The sum of all the widths will
determine the overall top-level width of your menu.
*/
#p7PMroot1 {width: 3em;}
#p7PMroot2 {width: 5em;}
#p7PMroot3 {width: 3em;}
#p7PMroot4 {width: 12em;}

/*
Main menu bar width.
Add the root widths together. Then add 2 ems per top-level item
to account for the left and right padding. Then add 1em to compensate
for browser rounding errors.
*/
#p7PMnav {width: 32em;}
/*
this sets the submenu widths to ems so that the width is
proportional, just like the to-level widths.
*/
#p7PMnav ul, #p7PMnav ul li {width: 12em;}

/*
this sets a down arrow on the top-level menu item triggers.
*/
#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {
	background-image:  url(p7pm/img/p7PM_light_south.gif);
	background-repeat:	no-repeat;
	background-position: right center;
}