Nice Menus is a lovely module that extends the Drupal menu system so that it allows drop down and collapsing menus.

The default recommended way for using menus is to use blocks, and Nice Menus is very easy to configure as a block. However, if you've already built your page using a Zen subtheme and the main menu system, or you categorically feel that blocks are not the way to go for your site, then you need to change the page generation code in your subtheme. This little guide mentions the steps necessary to enable Nice Menu support on your Zen subtheme on the Drupal 7 series.

The first step is to copy the templates from Zen's templates folder (sites/all/themes/Zen/templates) into the templates folder on your theme. The only one you need is page.tpl.php, but you may as well do them all.

The second step is to open page.tpl.php in your theme's template folder and locate the following bit of code, which generates the #navigation ID in your Zen theme, and is responsible for the main menu, which looks like this:

    <?php if ($main_menu): ?>
      <nav id="main-menu" role="navigation">
        <?php
        print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </nav>
    <?php endif; ?>

Replace the code with this:

    <?php if (module_exists('nice_menus')): ?>
      <nav id="main-menu" role="navigation">
        <?php
          print theme('nice_menus_main_menu', array(
            'direction' => 'down',
            'depth' => -1,
          )); ?>
      </nav>
    <?php elseif ($main_menu): ?>
      <nav id="main-menu" role="navigation">
        <?php
        print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </nav>
    <?php endif; ?>

What this code does is that, if the Nice Menu is enabled, it executes the nice menu, otherwise it executes the code that was there. If you disable Nice Menus, your website reverts to how it was.

Look at the theme_nice_menus_main_menu() function. This generates the nice menu. It has two arguments, direction and depth, which you may want to change.

Direction sets the direction the menu expands. Down is the default given here because Zen defaults to a navigation bar running across the top of the screen. This setting makes the most sense for a standard Zen set-up.

Depth sets the number of child menus that will be displayed. -1 is the setting for no limit.

The third step is to make changes with the CSS in Zen. The main things is to make sure that overflow: hidden isn't enabled, and to explicitly make it visible if you have problems about where it pops up.

Also, the default Nice Menus styling breaks the default Zen spacing for the navigation section. This should be fixed if you're going to use the default styling.

The fourth step is to handle the CSS for the nice menus themselves. In most cases, the default styling won't go with the subtheme you have created.

Nice Menus creates an entry in your theme settings that allows you to specify a CSS sheet to override the default styling. This sheet is applied just after the module's default sheet but before the theme is applied. The Nice Menus documentation talks about how to do this, and mentions that the best way is to copy the nice_menus-default.css sheet from the modules css directory into your theme's css directory, renaming it to something sensible.

Alternately, the Nice Menus basic support could be added to navigation.css, if you want to keep the current Zen structure you already have.