PVII Pop Menu Magic

User Guide Home :

editing menu widths: vertical sub-menus

The width for all sub-menus in a vertical menu can be same as the root menu width, wider than the root menu, or narrower. We'll look at which CSS rule controls the sub-menu width of a vertical menu, then we'll show you how change it. We'll assume that your existing menu is using the Vertical menu type and default Basic style.

In the Basic menu style sheet, the sub-menu width value is set to 180 pixels.

Sub-menu width

In the Vertical Root Menu Width tutorial, we changed the root menu width from 180 pixels to 200 pixels, resulting in the root menus being 20 pixels wider than the sub-menus.

Menu displayed in Dreamweaver

Now we'll change the sub-menu width to 200 pixels by editing p7pmv0.css, the style sheet that controls the Vertical Basic menu style.

Editing the Vertical Basic Style Sheet

The sub-menu width for a vertical menu is controlled by the rule: #p7PMnav ul. You'll use Dreamweaver's CSS panel to locate the rule and then you'll use Dreamweaver's CSS editor to modify the width property.

-Choose Window: CSS Styles (Shift + F11) to open Dreamweaver's CSS Styles panel.

-Find the second instance of the #p7PMnav ul rule (you'll see the width property listed in the panel's right column) and click once to select it.

The CSS Panel with target rule selected

-With the #p7PMnav ul rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.

Invoking the CSS Editor

The CSS Editor will open.

-Switch to the Box Category.

-Change the value in the Width box from 180 to 200.

Changing width value in Editor

-Click OK to apply your change and close the Editor.

Your menu's sub-menu widths have changed and now match the root menu width.

The edited menu in Dreamweaver

-Preview in your browser to see your new width:

The edited menu in browser


We've edited the root menu and sub-menu widths to the same value: 200 pixels. The sub-menus can be set wider or narrower than the root if you so desire.

Next: Home