• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 2. Creating Toggle-O-Matic Menus > Inserting Submenu <div> Tags

Inserting Submenu <div> Tags

You now have beautifully styled menu buttons. Don’t get caught up on what the CSS means or does yet. I’ll explain all that in a section near the end of the project. The important thing to note is things are taking shape now, and you’re more than halfway done. Now, add the three submenus using the following steps for each:

Click the Insert Div Tag icon (it doesn’t matter where your cursor is).

Choose divSubMenu from the Class drop-down list because this time you’re adding a submenu.


If you don’t already have ids defined for every element you want to use, you can add them anyway through the Insert DIV Tag dialog. Don’t see an id you want? Simply type it into the dialog anyway.

Give the first submenu an id of firstSubMenu. Because this id isn’t specified in your stylesheet, just type it in.

In the Insert drop-down, choose After Tag and select <a id="firstMenuButton"> from the List menu. This inserts each submenu after its respective menu button.

Click OK.


Don’t be alarmed because you don’t see any submenus in Design view. You’ll be able to edit your submenus after you’ve completed the next section.

Do the same for the second and third menus, using secondSubMenu and thirdSubMenu as the value in the ID field. Be sure to insert them after their respective menu buttons.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint