A majority of sites are now made with horizontal navigation menus instead of drop down menus, but Dreamweaver is also capable of creating vertical flyout menus with spry. These vertical menus are typically found in the sidebars of most websites. Creating flyout menus can be a challenge, because you have to determine how far to the right the flyout menu is positioned, but Dreamweaver makes the whole process quick and easy.

The sample site simply has a header, and I created a container div for our menu, called nav. Go to Insert> Spry> Spry Menu Bar. Choose vertical from the two choices. In the Properties Panel you can create the different menu items. You can add menu items, sub menu items, and even create third-level menu items. From this menu, you can add the links to different pages within your site. You can also control what happens when the link is clicked, such as if it opens in the same window, or in a new window. You will notice that the default colors leave much to be desired. After you have set up your menu structure, you can begin to style the menu itself.

<div id="header"><img src="cssmenumaker.png" alt="csslogo" width="350"></div>
  <div id="nav">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#">Home</a>      </li>
      <li><a href="#">About</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Portfolio</a>
        <ul>
          <li><a href="#">Print</a>          </li>
          <li><a href="#">Web</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Concept</a>
            <ul>
              <li><a href="#">Sketches</a></li>
              <li><a href="#">Painting</a></li>
              <li><a href="#">Digital</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

At the very top of the document window, Dreamweaver lists the different files that link to the current page, such as javascript, CSS, etc. Click on SpryMenuBarVertical.css to view the stylesheet that determines the look our our Dreamweaver flyout menu.

Skip down to line 68, where the CSS is broken down into the colors and borders, the type and type colors for our menu. The first thing we are going to do is specify that our menu has no border. The type is grey is the comments section for each set of css for each part of our menu. Set the border property for ul.MenuBarVertical and ul.MenuBarVertical ul to none.

ul.MenuBarVertical ul
{
     border: none;
}

The next section styles the main menu that you see without hovering over it. I changed the background color to match the lavender color of the type at the top. I changed the color of the text to white.

ul.MenuBarVertical a
{
     display: block;
     cursor: pointer;
     background-color: #66C;
     padding: 0.5em 0.75em;
     color: #fff;
     text-decoration: none;
}

Dreamweaver Vertical Spry Menu

The next section styles the menu focus when you hover over a menu section. I made this a darker purple than the normal state. I also changed the text color to yellow, which contrasts well with purple. This tells you what the parent menu is of the submenu that you are hovering over.

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
     background-color:#63C;
     color: #CF0;
}

Dreamweaver Vertical Spry Menu Focus

The last set of css is for the actual hover menu item itself. I styles this the same as the focus colors, so that the menu looks consistent. I added an inner shadow using the inset style for the box-shadow property. I set the vertical and horizontal shifts to 0, but set the blur to be 4px, so that the user will get a sense of depth from the menu.

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
     background-color: #63C;
     color: #CF0;
     box-shadow:inset 0px 0px 4px #000;
}

Dreamweaver Vertical Spry Menu Hover