Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Pop Menu Magic 2 CSS Glossary

Pop Menu Magic 2 uses CSS for styling. The menu CSS is editable in Dreamweaver using the CSS Styles panel (covered in your PMM2 user guide). You have total control over your menu's appearance at all times. This glossary will supplement the CSS instruction in your Pop Menu Magic 2 user guide as it will help you to understand all the CSS rules in your menu style sheet.

New to CSS? CSS=Power

Seeing all the CSS rules written out below might be overwhelming, but as you use Dreamweaver's CSS Styles Panel and editing tools, you will only be exposed to one rule at a time as you make your edits. Moreover, the PMM2 User Guide contains step-by-step instructions for specific tasks, such as changing the background color of a menu from red to black. The fact that every facet of the menu is controlled by rules in an ordinary style sheet means that there are no styling or customization limits with PMM2.

PMM2 CSS Naming Convention

All style rules are prefaced with .p7PMMv08. The v08 indicates a vertical menu using the 08 style theme, which is Cayenne. Other style themes have a similar CSS structure, for example .p7PMMh08 would indicate a horizontal Cayenne menu.

.p7PMMv08 {
width: auto;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
padding: 0;
text-align: left;
line-height: normal;
}

This CSS rule governs the outer containing DIV that wraps the entire menu. The width is set to auto to ensure that your menu conforms to the width of the DIV or table cell in which you insert it. Margin is set to 0 Auto using CSS shorthand, which means the first value (0) applies to both the top and bottom, while the second value (auto) applies to the left and right. With auto left and right margins set, the menu will be centered if you assign a width other than auto.

Font-family is set for your convenience. If you have a global font set in your own style sheet you may remove it. Font-size is set to inherit so that it will inherit font-sizes set in your own style sheet. Of course, if you would like to set a sprcific size for your menu text you can set it on this rule.

Text alignment and line height are set explicitly to eliminate conflicts with your page styles. You should not edit these 2 properties. Padding, however, can be adjusted to suit.

.p7PMMv08 ul div {display: none;}

This rule sets your sub-menus to be hidden and should not be changed.

Notes on DIV rules used in other PMM2 Themes

Some PMM2 themes are styled to provide several pixels of vertical or horizontal separation between top-level menu items and their first sub-menu. This is done by assigning top or left padding to the sub-menu DIV wrapper for one level and then removing it for 2nd level sub-menus. You'll find the following 2 rules in the CSS file for the Multicolor 2 theme:

.p7PMMh06 ul div {
padding-top: 6px;
background-image: url(img/pmm_iefix.gif);
}

The pmm_iefix background image fixes a bug in older versions of IE Windows (IE7 and under) that causes he menu to prematurely close if you mouse into the area that contains the padding. It is a simple transparent gif background.

/*Remove Buffer for 2nd level flyouts*/
.p7PMMh06 ul ul div {
padding-top: 0px;
background-image: none;
}

.p7PMMv08 ul {
margin: 0;
padding: 0;
}

Your menu is an unordered list and this rule turns off the default indentation that browsers assign to the <ul> tag and its children.

.p7PMMv08 li {list-style-type: none;}

This rule turns off default bullet characters that browsers assign to list items by default.

.p7PMMv08 a {
display: block;
text-decoration: none;
padding: 5px 16px;
color: #000 !important;
background-color: #E83A00;
border-top: 1px solid #FF4609;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #FF4609;
text-align: left;
}

This rule governs the link styling for your menu items. You can edit all properties except for display: block. Padding sets the whitespace inside the link "box". Changing the top and bottom setting from 5px will change the height of your link box. Changing the left and right setting from 16px will change the width of your link box.

The !important notation in the color declaration is to prevent conflicts with other CSS that may be attached to your page.

.p7PMMv08 a:hover {
color: #FFF !important;
background-color: #000 !important;
border-color: #000;
}

The hover state for your links. Again, the !important notation is to prevent conflicts with other CSS that may be attached to your page

.p7PMMv08 ul a.pmmfirst { }

The PMM2 system programatically assigns a class of pmmfirst to the first top-level link (the <a> tag) in your menu. Use this rule if you would like to assign special properties to the first link.

Notes on the pmmfirst and pmmlast classes

We provide a pmmfirst and pmmlast class for both the link element—the <a> tag—and the list item element—the <li> tag. We do this to provide CSS authors with total flexibility.

.p7PMMv08 ul a.pmmlast { }

The PMM2 system programatically assigns a class of pmmlast to the last root (top-level) link in your menu. Use this rule if you would like to assign special properties to the last link.

The first and last classes can be used if you would like a different border effect (or no border) on just the first or last link in your menu. If the style theme you are using has borders (or any other properties) on the list item (li) element you would use the li.pmmfirst and li.pmmlast classes listed below.

.p7PMMv08 ul li.pmmfirst { }

The PMM2 system programatically assigns a class of pmmfirst to the first root (top-level) list item (the <li> tag) in your menu. Use this rule if you would like to assign special properties to the first list item (<li> tag).

.p7PMMv08 ul li.pmmlast { }

The PMM2 system programatically assigns a class of pmmlast to the last root (top-level) list item (the <li> tag) in your menu. Use this rule if you would like to assign special properties to the last list item.

Notes on the pmmfirst and pmmlast classes

There may be times when you want to set a style for the first or last elements in your root (top-level) menu that need to be turned off or counteracted in your sub-menus. If so, you can create additional pmmfirst and/or pmmlast rules that target only the sub-menus. The syntax would be:

  • .p7PMMv08 ul ul a.pmmfirst { }
  • .p7PMMv08 ul ul a.pmmlast { }
  • .p7PMMv08 ul ul li.pmmfirst { }
  • .p7PMMv08 ul ul li.pmmlast { }

Any time you see a rule that carries the syntax "ul ul" in the selector name it means that it will target the second UL element in the structure, which happens to be your sub-menus.

Do note that some of the style themes do carry these rules already.

.p7PMMv08 ul ul {
z-index: 10000;
width: 180px;
background-color: #000;
}

This rule governs the sub-menu boxes and all their sub-menus. You could even get more specific if you wanted to style the third level sub-menus differently by adding a new rule with an additional ul indicator:

.p7PMMv08 ul ul ul

.p7PMMv08 ul ul li {
background-image: none;
background-color: #424242;
}

This rule targets list items in the sub-menus only.

.p7PMMv08 ul ul a {
color: #CCC !important;
background-color: #333;
border-color: #444 #000 #000 #444;
text-align: left;
overflow: hidden;
}

This rule targets link items in the sub-menus only. The overflow property should not be edited.

.p7PMMv08 ul ul a:hover {border-color: #E83A00;}

This rule styles the hover state for links in the sub-menus.

.p7PMMv08 img {border: 0;}

Since PMM2 has full image support, this rule is necessary to ensure that the default borders that browsers place on images that are links do not render.

Note that if use a strict DOCTYPE for your page, you should add vertical-align: bottom to this rule.

.p7PMMv08 .p7PMM_img {
padding: 0;
border: 0;
background-image: none;
background-color: transparent;
}

The PMM2 system automatically applies a class of .p7PMM_img when you use images for your links. This rule turns off padding, borders, and background to ensure that your images display perfectly.

.p7PMMv08 a.trig_open {border-color: #000;}

The trig_open class is assigned by the PMM2 system to those links that trigger sub-menus while the sub-menu is showing.

.p7PMMv08 a.trig_closed {
background-image: url(img/pmm_east_dark.gif);
background-repeat: no-repeat;
background-position: right center;
}

The trig_closed class is assigned by the PMM2 system to those links that trigger sub-menus while the sub-menu is hidden. Note that we assign a background image here, which is an east (right) pointing arrow. If this rule were for a horizontal menu, the background image would be a south-facing arrow.

.p7PMMv08 a.trig_closed_up {
background-image: url(img/pmm_north_dark.gif);
background-repeat: no-repeat;
background-position: right center;
}

The trig_closed_up class is assigned by the PMM2 system to those links that trigger sub-menus while the sub-menu is hidden and when you have set your sub-menus to open upwards. The background image in this case points north (up) in the direction of the sub-menu.

.p7PMMv08 a.trig_closed_left {
background-image: url(img/pmm_west_dark.gif);
background-repeat: no-repeat;
background-position: left center;
}

The trig_closed_left class is assigned by the PMM2 system to those links in a vertical menu only that trigger sub-menus while the sub-menu is hidden and when you have set your sub-menus to the left. The background image in this case points west (left) in the direction of the sub-menu.

.p7PMMv08 a.trig_open, .p7PMMv08 a.trig_open_left {
color: #CCC !important;
background-color: #000 !important;
}

This is a multiple selector governing the color and background-color for 2 separate classes: a.trig_open and a.trig_open_left

Remember, the trig_open classes are assigned to a trigger link when its associated sub-menu is open.

.p7PMMv08 ul ul a.trig_closed {
background-image: url(img/pmm_east_medium.gif);
background-repeat: no-repeat;
background-position: right center;
}

The ul ul trig_closed rule targets trigger links in sub-menus while their associated sub-menus are hidden. Note that we assign a background image here, which is an east (right) pointing arrow.

.p7PMMv08 ul ul a.trig_closed_left {
background-image: url(img/pmm_west_medium.gif);
background-repeat: no-repeat;
background-position: left center;
}

The ul ul trig_closed_left rule targets trigger links in sub-menus while their associated sub-menus are hidden—and if you've set your sub-menus to fly out to the left. Note that we assign a background image here, which is an west (left) pointing arrow.

.p7PMMv08 ul ul a.trig_open, .p7PMMv08 ul ul a.trig_open_left {
color: #CCC !important;
background-color: #000 !important;
background-image: none;
border-color: #E83A00;
}

This is a multiple selector governing the color and background-color for 2 separate classes:
ul ul a.trig_open and ul ul a.trig_open_left

Remember, the trig_open classes are assigned to a trigger link when its associated sub-menu is open and a rule that includes ul ul in the name is targeting the second level of sub-menus.

.p7PMMv08 .current_mark {
font-weight: bold;
color: #000 !important;
font-variant: small-caps;
}

The .current_mark class is assigned by the PMM2 system to a link in your menu that matches the address of the current page. If the matching link is in a sub-menu then any trigger links above it are also targeted. The properties set on this rule serve to highlight the current page link so it stands out as a "you are here" indicator.

.p7PMMv08 ul ul .current_mark {color: #EEE !important;}

This rule, because it includes ul ul in the name, targets the current marked links that are in your sub-menus so that they can be styled differently than the current marked links in the top-level of your menu.

.p7PMMv08 .current_mark:hover {
font-weight: bold;
color: #FFFFFF !important;
}

This rule sets hover properties for your current marked links. If you wanted to have a different hover for the top-level current marked links and the sub-menu ones, you would simply add this new rule to your style sheet:

.p7PMMv08 ul ul .current_mark:hover

Closing thoughts

Pop Menu Magic 2 allows you to style every part of your menu. To see all the possibilities, make sure you read through the PMM2 User Guide that came with your product download.