- 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
Getting Classified
It's about time to start making these buttons look pretty. You just need to apply a custom class from the provided style sheet to each of the menu buttons. The custom class is called aMenuButton. The a is for anchor or <a>, which is the type of tag that you're going to apply this custom class to. I like to give custom classes names like that to help me remember their purpose if they're used for no other element. For each menu button you perform the following steps:
Click on the first Menu Button in Design view.
Right-click/Ctrl-click the <a> tag in the tag selector.
Select Set Class > aMenuButton. Do the same for the second and third menu buttons.
Save your work.
NOTE
It is very important that the aMenuButton class is applied to the <a> tags. Even though you don't have any other tags in the document <body> yet, it is possible that Dreamweaver will wrap the tags with a <span> or <p> tag if you apply the CSS by other methods than described in the steps.