Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

CSS Requirements

I've made it real easy for you by providing the working CSS files. If you want to create your own menu button and submenu styles, there are only a few things you need to know that are required for the Toggle-O-Matic menu system to work.

Menu Buttons

In this project, the custom class for menu buttons is called a.aMenuButton. For the hyperlinks to stack upon each other vertically, you need to have display: block; in the menu button's class declaration. This tells the browser to display the hyperlink as a block-level element instead of its default, which is inline.

If you'd like to have another style for menu buttons when their submenu is exposed, you'll need to have a separate custom class. You'll find a.aMenuButtonDown defined in menus.css for that purpose. Typically, all you'd change here are any colors and the background image.

Listing 2.1

/* Menu Button Styles */
#divMenu a.aMenuButton, #divMenu a.aMenuButtonDown {
  background-color: #7B83B5;
  border: 1px solid #5B667B;
  border-top: none;
  padding: 2px 0px 2px 25px;
  font: bold small-caps 80% Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 3px 50%;
  display: block;
/* Set menu button's image */
#divMenu a.aMenuButton {
  background-image: url(assets/images/inactive.gif);
/* Change menu button's image on hover and when down */
#divMenu a.aMenuButton:hover, #divMenu a.aMenuButtonDown {
  background-image: url(assets/images/expand.gif);

/* Submenu Styles */
div.divSubMenu {
  text-indent: 18px;
  padding: 5px;
  border: 1px solid #5B667B;
  display: none;


The custom class for the submenus, div.divSubMenu, needs to have display: none; in its style declaration. By setting the display property to none, you will be hiding the submenus both in Design view and the browser. Because you can't see the submenus while you work in Dreamweaver's Design view, you have a Design Time Style Sheet (dtMenus.css) that contains div.divSubMenu set to display:block!important;.


Keep in mind that none of these custom classes should have any positioning properties. The elements need to be relative to each other so that the elements below the submenus are moved as the menus are toggled and not covered up.

  • + Share This
  • 🔖 Save To Your Account