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.
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.
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.
-With the #p7PMnav ul rule still selected, click the edit icon along the bottom of the CSS Panel to open Dreamweaver's CSS Editor.
The CSS Editor will open.
-Switch to the Box Category.
-Change the value in the Width box from 180 to 200.
-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.
-Preview in your browser to see your new width:
Notes
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