Adding a drop-down navigation menu

A slight variation to the fly-out menu is the drop-down menu. Again, this is a menu structure that many users will find familiar and will be able to use comfortably.

Getting ready

We may build on the previous recipe, as the markup will be almost identical, just with the addition of some CSS class names applied to the parent element.

How to do it...

1. 1. This example uses a file nav_dropdown.php with the following content:

   <?php
   require_once(dirname(__FILE__) . '/../config.php');
   $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
   $PAGE->set_url('/cook/nav_dropdown.php');
   $PAGE->requires->js('/cook/nav_dropdown.js', true);
   echo $OUTPUT->header();
   ?>
   <div id="menu" class="yui3-menu yui3-menu-horizontal yui3- menubuttonnav" style="float:left;height:100px;">
   <div class="yui3-menu-content">
   <ul>
   <li class="yui3-menuitem">
   <a class="yui3-menuitem-content" href="#">Item 1</a>
   </li>
   <li class="yui3...