- It Works Like This
- Preparing to Work
- Forging Friendly Hyperlinks to Submenus
- Time to Identify: ID Attributes for Menu Buttons
- Getting Classified
- Containing the Menu with <div> Tags
- Inserting Submenu <div> Tags
- Design Time CSS to the Rescue
- CSS Requirements
- Toggling with Extensions
- Now Try This
Design Time CSS to the Rescue
With div.divSubMenu in menus.css set to display:none;, you won't be able to see the submenus in Design view. If you're inclined to do so, you're more than welcome to edit the submenus in Code view, but it will be easier in Design view. You could modify menus.css while you're working every time you need to see submenus, but that would be a hassle. Instead you can take advantage of Dreamweaver's Design Time Style Sheets feature.
Design Time Style Sheets are invisibly attached to a document via a Design Note. Have you ever wondered what those _notes folders with .mno files are doing in your site? Well, Design Time Style Sheet info is but one of their purposes. In dtMenus.css you'll find div.divSubMenu set to display: block !important;. The !important property makes the Design Time Style Sheet take priority over the regularly linked style sheet, making the submenus visible for editing.
Choose Window > CSS Styles or Shift+F11.
Choose Options > Design-time. The icon in the right corner of the expanded panel with the three little lines and a down arrow is called the Options menu.
When the Design Time Style Sheets dialog appears, click the (+) button above Show Only at Design Time.
Browse to dtMenus.css.
Click OK.