- 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
Containing the Menu with <div> Tags
Things still aren't looking pretty yet. That's because the navigation hyperlinks are defined to use the descendant selector #divMenu a.menuButton. This means that only anchors with a class of aMenuButton within an element identified as divMenu will be styled the way you've defined. Using a descendant selector allows you to give only the buttons inside your navigation layer the fancy styling you're after. You already have all the anchors using the aMenuButton class; now put them inside a <div>. First you'll add tags to contain the entire Toggle-O-Matic menu system. In the next section, you'll add the <div> tags for the submenus.
In Design view, select all three menu button hyperlinks.
In the Layout category of the Insert bar, click the Insert Div Tag icon.
Leave the Class field blank. In the ID drop-down, select divMenu, which is the only available id defined in the CSS file.
TIP
Only unused ids are made available in the ID drop-down list. If you've used that id on the page once before, it will be removed from the list to help ensure that your ids are unique to the page.
Make sure Insert is set to Wrap Around Selection, and click OK. Choosing Wrap Around Selection will ensure that all of your hyperlinks are placed inside the newly inserted <div>.
Save your work.