diff --git a/src/node-menunav/docs/component.json b/src/node-menunav/docs/component.json
index bc2e162da3d..e3d34d3fcec 100644
--- a/src/node-menunav/docs/component.json
+++ b/src/node-menunav/docs/component.json
@@ -14,6 +14,60 @@
             "description": "Creating left navigation using the MenuNav Node Plugin.",
             "modules"    : ["node-menunav", "cssgrids"],
 
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-2",
+            "displayName": "Basic Top Nav",
+            "description": "Creating top navigation using the MenuNav Node Plugin",
+            "modules"    : ["node-menunav", "cssgrids"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-3",
+            "displayName": "Menu Button Top Nav",
+            "description": "Creating menu button navigation using the MenuNav Node Plugin",
+            "modules"    : ["node-menunav", "cssgrids"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-4",
+            "displayName": "Split Button Top Nav",
+            "description": "Creating split button navigation using the MenuNav Node Plugin",
+            "modules"    : ["node-menunav", "cssgrids"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-5",
+            "displayName": "Left Nav with Submenus with Shadows",
+            "description": "Adding shadows to submenus of a left nav using the MenuNav Node Plugin",
+            "modules"    : ["node-menunav", "cssgrids"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-6",
+            "displayName": "Left Nav With Submenus With Rounded Corners",
+            "description": "Adding rounded corners to submenus of a left nav using the MenuNav Node Plugin",
+            "modules"    : ["node-menunav", "cssgrids"],
+
+            "hideTableOfContents": true
+        },
+
+        {
+            "name"       : "node-menunav-7",
+            "displayName": "Skinning Menus Created Using the MenuNav Node Plugin",
+            "description": "Skining a menu built using the MenuNav Node Plugin to look like the menus on Flickr",
+            "modules"    : ["node-menunav", "cssgrids"],
+
             "hideTableOfContents": true
         }
     ],
@@ -22,6 +76,36 @@
         "menunav-leftnav-example": {
             "displayName": "MenuNav: Basic Left Nav Example",
             "layout"     : "menunav-example"
+        },
+
+        "node-menunav-2-example": {
+            "displayName": "MenuNav: Basic Top Nav Example",
+            "layout"     : "menunav-example"
+        },
+
+        "node-menunav-3-example": {
+            "displayName": "MenuNav: Menu Button Top Nav Example",
+            "layout"     : "menunav-example"
+        },
+
+        "node-menunav-4-example": {
+            "displayName": "MenuNav: Split Button Top Nav Example",
+            "layout"     : "menunav-example"
+        },
+
+        "node-menunav-5-example": {
+            "displayName": "MenuNav: Left Nav with Submenus with Shadows Example",
+            "layout"     : "menunav-example"
+        },
+
+        "node-menunav-6-example": {
+            "displayName": "MenuNav: Left Nav With Submenus With Rounded Corners Example",
+            "layout"     : "menunav-example"
+        },
+
+        "node-menunav-7-example": {
+            "displayName": "MenuNav: Skinning Menus Created Using the MenuNav Node Plugin Example",
+            "layout"     : "menunav-example"
         }
     }
 }
diff --git a/src/node-menunav/docs/index.mustache b/src/node-menunav/docs/index.mustache
index 29971d0ae68..34837234cf7 100644
--- a/src/node-menunav/docs/index.mustache
+++ b/src/node-menunav/docs/index.mustache
@@ -1,47 +1,47 @@
 <div class="intro">
     <p>
-        The MenuNav Node Plugin makes it easy to transform existing list-based 
-        markup into traditional, drop down navigational menus that are both 
-        accessible and easy to customize, and only require a small set of 
+        The MenuNav Node Plugin makes it easy to transform existing list-based
+        markup into traditional, drop down navigational menus that are both
+        accessible and easy to customize, and only require a small set of
         dependencies.  The MenuNav Node Plugin features:
     </p>
-    
+
     <dl>
         <dt>Progressive Enhancement</dt>
         <dd>
-            The MenuNav Node Plugin is designed to support  
+            The MenuNav Node Plugin is designed to support
             <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a>,
-            making it easy to transform simple, semantic markup into dynamic 
+            making it easy to transform simple, semantic markup into dynamic
             drop-down menus with just a few lines of JavaScript.
         </dd>
 
         <dt>Small footprint</dt>
         <dd>
-            The MenuNav Node Plugin has a small footprint of ~5 KB (GZIP'd) and 
+            The MenuNav Node Plugin has a small footprint of ~5 KB (GZIP'd) and
             requires a minimal set of dependencies.
         </dd>
-    
+
         <dt>Accessibility &#38; Usability Minded</dt>
         <dd>
-            The MenuNav Node Plugin was built with both accessibility and usability 
-            in mind.  The MenuNav Node Plugin implements established mouse and 
-            keyboard interaction patterns to deliver a user experience that is both 
-            familiar and easy to use.  To that foundation the MenuNav Node plugin 
-            adds support for screen readers through the use of the 
+            The MenuNav Node Plugin was built with both accessibility and usability
+            in mind.  The MenuNav Node Plugin implements established mouse and
+            keyboard interaction patterns to deliver a user experience that is both
+            familiar and easy to use.  To that foundation the MenuNav Node plugin
+            adds support for screen readers through the use of the
             <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
         </dd>
-    
+
         <dt>Easy to style and configure</dt>
         <dd>
-            The MenuNav Node Plugin is easy to configure.  The visual presentation 
-            of menus is controlled completely via CSS.  A handful of 
+            The MenuNav Node Plugin is easy to configure.  The visual presentation
+            of menus is controlled completely via CSS.  A handful of
             straightforward [[#configuration attributes]] can be used to make
             common modifications to a menu's behavior.
         </dd>
-        
+
         <dt>`<iframe>` Shim for IE 6</dt>
         <dd>
-            No menuing system would be complete without an 
+            No menuing system would be complete without an
             `<iframe>` to prevent `<select>` elements from poking through menus
             in IE 6.
         </dd>
@@ -51,8 +51,8 @@
 {{>getting-started}}
 
 <p>
-Next, apply the `yui3-skin-sam` class name to an element that is a 
-parent of the element in which the menu lives. You can usually accomplish this 
+Next, apply the `yui3-skin-sam` class name to an element that is a
+parent of the element in which the menu lives. You can usually accomplish this
 simply by putting the class on the `<body>` tag:
 </p>
 
@@ -64,7 +64,7 @@ simply by putting the class on the `<body>` tag:
 
 <p>
 To create a menu using the MenuNav Node Plugin, start by including the required markup.  The markup
-for menus created using the MenuNav Node Plugin follows the same <a href="../widget/index.html#markup">pattern established for Widgets</a>, 
+for menus created using the MenuNav Node Plugin follows the same <a href="../widget/index.html#markup">pattern established for Widgets</a>,
 with each menu's content box containing one or more `<ul>` elements:
 </p>
 
@@ -79,10 +79,10 @@ with each menu's content box containing one or more `<ul>` elements:
     </div>
 </div>
 ```
-                
+
 <p>
-Menu items also follow the Widget markup pattern, with the root node defined using an 
-`<li>` element: 
+Menu items also follow the Widget markup pattern, with the root node defined using an
+`<li>` element:
 </p>
 
 <h4>MenuItem Markup Example</h4>
@@ -94,10 +94,10 @@ Menu items also follow the Widget markup pattern, with the root node defined usi
     </a>
 </li>
 ```
-                
+
 <p>
-Submenus are defined by wrapping the the menu markup in an <code>&#60;li&#62;</code> element.  Each 
-submenu must have have a label.  The label should preceed the menu markup, and the label's 
+Submenus are defined by wrapping the the menu markup in an <code>&#60;li&#62;</code> element.  Each
+submenu must have have a label.  The label should preceed the menu markup, and the label's
 <code>href</code> attribute should be set to the point to the id of its corresponding submenu.
 </p>
 
@@ -117,7 +117,7 @@ submenu must have have a label.  The label should preceed the menu markup, and t
 ```
 
 <p>
-Following the patterns illustrated above, the markup for a menu created using the MenuNav Node 
+Following the patterns illustrated above, the markup for a menu created using the MenuNav Node
 Plugin comes together as follows:
 </p>
 
@@ -147,9 +147,9 @@ Plugin comes together as follows:
                             <li class="yui3-menuitem">
                                 <a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Yahoo! Notepad</a>
                             </li>
-                        </ul>            
-                    </div>    
-                </div> 
+                        </ul>
+                    </div>
+                </div>
             </li>
         </ul>
     </div>
@@ -162,19 +162,19 @@ the <a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a> me
 </p>
 
 ```
-//    Call the "use" method, passing in "node-menunav".  This will load the 
-//    script and CSS for the MenuNav Node Plugin and all of the required 
+//    Call the "use" method, passing in "node-menunav".  This will load the
+//    script and CSS for the MenuNav Node Plugin and all of the required
 //    dependencies.
 
 YUI().use("node-menunav", function(Y) {
 
-    //    Use the "contentready" event to initialize the menu when the subtree of 
-    //    element representing the root menu (<div id="menu-1">) is ready to 
+    //    Use the "contentready" event to initialize the menu when the subtree of
+    //    element representing the root menu (<div id="menu-1">) is ready to
     //    be scripted.
 
     Y.on("contentready", function () {
 
-        //    The scope of the callback will be a Node instance representing 
+        //    The scope of the callback will be a Node instance representing
         //    the root menu (<div id="menu-1">).  Therefore, since "this"
         //    represents a Node instance, it is possible to just call "this.plug"
         //    passing in a reference to the MenuNav Node Plugin.
@@ -193,9 +193,9 @@ YUI().use("node-menunav", function(Y) {
 <h4>Configuring Orientation</h4>
 
 <p>
-The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal 
-orientation.  The default orientation for menus is vertical, but can be easily switched to 
-horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the 
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation.  The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
 root menu's bounding box, as illustrated in the following example:
 </p>
 
@@ -210,9 +210,9 @@ root menu's bounding box, as illustrated in the following example:
 ```
 
 <p>
-Once the <code>yui3-menu-horizontal</code> class name is applied to the node representing the 
-root menu's bounding box, the menu's keyboard interaction is automatically adjusted for a 
-horizontal orientation.  The default "Sam" skin provides the following default visualization for 
+Once the <code>yui3-menu-horizontal</code> class name is applied to the node representing the
+root menu's bounding box, the menu's keyboard interaction is automatically adjusted for a
+horizontal orientation.  The default "Sam" skin provides the following default visualization for
 horizontal menus, as illustrated in the follow screen capture of a horizontal menu example:
 </p>
 
@@ -221,8 +221,8 @@ horizontal menus, as illustrated in the follow screen capture of a horizontal me
 <h4>Configuring Style &amp; Behavior</h4>
 
 <p>
-The default "Sam" skin provides two additional visualizations for horizontal menus, each of which 
-can be applied by both changes to the menu label markup and through the application of a class to 
+The default "Sam" skin provides two additional visualizations for horizontal menus, each of which
+can be applied by both changes to the menu label markup and through the application of a class to
 the node representing the root menu's bounding box.
 </p>
 
@@ -230,14 +230,14 @@ the node representing the root menu's bounding box.
 
 <p>
 The first of the two optional horizontal menu visualizations available with the "Sam" skin renders
-each menu label as a menu button; each menu label is rendered with an arrow to the right 
+each menu label as a menu button; each menu label is rendered with an arrow to the right
 of its text label, providing a visual cue that there is a corresponding submenu.
 </p>
 
 <div class="wideimage"><img src="{{componentAssets}}/menubutton-menu.png" width="495" height="130" alt="Screen capture of a horizontal menu with each menu label in the root menu rendered as menu buttons."></div>
 
 <p>
-To apply this style to a horizontal menu, start by adding the class <code>yui3-menubuttonnav</code> 
+To apply this style to a horizontal menu, start by adding the class <code>yui3-menubuttonnav</code>
 to the node representing the root menu's bounding box, as illustrated in the following example:
 </p>
 
@@ -257,16 +257,16 @@ to the node representing the root menu's bounding box, as illustrated in the fol
 <div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
     <div class="yui3-menu-content"><!-- Content box -->
         <ul>
-        
+
             <li>
                 <a class="yui3-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
                 <div id="submenu-1" class="yui3-menu">
                     <div class="yui3-menu-content">
-                    
+
                         <!-- submenu content -->
-                    
+
                     </div>
-                </div>        
+                </div>
             </li>
 
         </ul>
@@ -275,30 +275,30 @@ to the node representing the root menu's bounding box, as illustrated in the fol
 ```
 
 <p>
-As a final, optional step, use the     
-<a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a> 
-and <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_mouseOutHideDelay"><code>mouseOutHideDelay</code></a> 
-configuration attributes to configure the menu labels to behave like menu buttons.  Set the 
-<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't 
-made visible until the label is clicked.  Set the <code>mouseOutHideDelay</code> to 
-<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area 
+As a final, optional step, use the
+<a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a>
+and <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_mouseOutHideDelay"><code>mouseOutHideDelay</code></a>
+configuration attributes to configure the menu labels to behave like menu buttons.  Set the
+<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't
+made visible until the label is clicked.  Set the <code>mouseOutHideDelay</code> to
+<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area
 outside of the submenu.
 </p>
 
 ```
-//    Call the "use" method, passing in "node-menunav".  This will load the 
-//    script and CSS for the MenuNav Node Plugin and all of the required 
+//    Call the "use" method, passing in "node-menunav".  This will load the
+//    script and CSS for the MenuNav Node Plugin and all of the required
 //    dependencies.
 
 YUI().use("node-menunav", function(Y) {
 
-    //    Use the "contentready" event to initialize the menu when the subtree of 
-    //    element representing the root menu (<div id="menu-1">) is ready to 
+    //    Use the "contentready" event to initialize the menu when the subtree of
+    //    element representing the root menu (<div id="menu-1">) is ready to
     //    be scripted.
 
     Y.on("contentready", function () {
 
-        //    The scope of the callback will be a Node instance representing 
+        //    The scope of the callback will be a Node instance representing
         //    the root menu (<div id="menu-1">).  Therefore, since "this"
         //    represents a Node instance, it is possible to just call "this.plug"
         //    passing in a reference to the MenuNav Node Plugin.
@@ -313,14 +313,14 @@ YUI().use("node-menunav", function(Y) {
 <h5>Split Button Visualization</h5>
 
 <p>
-The other optional horizontal menu visualization available with the "Sam" skin renders each menu 
+The other optional horizontal menu visualization available with the "Sam" skin renders each menu
 label as a split button.
 </p>
 
 <div class="wideimage"><img src="{{componentAssets}}/splitbutton-menu.png" width="495" height="130" alt="Screen capture of a horizontal menu with each menu label in the root menu rendered as split buttons."></div>
 
-<p>To apply this style to a horizontal menu, start by adding the class 
-<code>yui3-splitbuttonnav</code> to the node representing the root menu's bounding box, as 
+<p>To apply this style to a horizontal menu, start by adding the class
+<code>yui3-splitbuttonnav</code> to the node representing the root menu's bounding box, as
 illustrated in the following example:
 </p>
 
@@ -335,17 +335,17 @@ illustrated in the following example:
 ```
 
 <p>
-Next, define the markup for each menu label.  Start with a <code>&#60;span&#62;</code> with a class 
-of <code>yui3-menu-label</code> applied.  Inside the <code>&#60;span&#62;</code>, place two 
-<code>&#60;a&#62;</code> elements &#151; one for each of the label's two clickable regions.  
-Each <code>&#60;a&#62;</code> has separate, but related responsibilities:  The first 
+Next, define the markup for each menu label.  Start with a <code>&#60;span&#62;</code> with a class
+of <code>yui3-menu-label</code> applied.  Inside the <code>&#60;span&#62;</code>, place two
+<code>&#60;a&#62;</code> elements &#151; one for each of the label's two clickable regions.
+Each <code>&#60;a&#62;</code> has separate, but related responsibilities:  The first
 <code>&#60;a&#62;</code> represents the label's default action.  The second <code>&#60;a&#62;</code>
-toggles the display of a submenu whose content contains other options related to, or in the same 
-category as the default action.  Therefore to configure the first <code>&#60;a&#62;</code>, 
+toggles the display of a submenu whose content contains other options related to, or in the same
+category as the default action.  Therefore to configure the first <code>&#60;a&#62;</code>,
 simply set its <code>href</code> attribute to any URL.  For the second <code>&#60;a&#62;</code>,
-apply a class name of <code>yui3-menu-toggle</code>, and set the value of the <code>href</code> 
-attribute to the id of the label's corresponding submenu.  Lastly, the text node of the second 
-<code>&#60;a&#62;</code> should label the contents of its corresponding submenu. 
+apply a class name of <code>yui3-menu-toggle</code>, and set the value of the <code>href</code>
+attribute to the id of the label's corresponding submenu.  Lastly, the text node of the second
+<code>&#60;a&#62;</code> should label the contents of its corresponding submenu.
 </p>
 
 ```
@@ -357,7 +357,7 @@ attribute to the id of the label's corresponding submenu.  Lastly, the text node
                 <span class="yui3-menu-label"><!-- menu label root node -->
                     <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action -->
                     <a href="#answers-options" class="yui3-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
-                </span>                                            
+                </span>
 
                 <div id="answers-options" class="yui3-menu">
                     <div class="yui3-menu-content">
@@ -368,8 +368,8 @@ attribute to the id of the label's corresponding submenu.  Lastly, the text node
                             <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
                         </ul>
                     </div>
-                </div>                
-                
+                </div>
+
             </li>
         </ul>
     </div>
@@ -377,29 +377,29 @@ attribute to the id of the label's corresponding submenu.  Lastly, the text node
 ```
 
 <p>
-Use the <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a> 
-and <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_mouseOutHideDelay"><code>mouseOutHideDelay</code></a> 
-configuration attributes to configure the menu labels to behave like split buttons.  Set the 
-<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't 
-made visible until the menu trigger is clicked.  Set the <code>mouseOutHideDelay</code> to 
-<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area 
+Use the <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a>
+and <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_mouseOutHideDelay"><code>mouseOutHideDelay</code></a>
+configuration attributes to configure the menu labels to behave like split buttons.  Set the
+<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't
+made visible until the menu trigger is clicked.  Set the <code>mouseOutHideDelay</code> to
+<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area
 outside of the submenu.
 </p>
 
 ```
-//    Call the "use" method, passing in "node-menunav".  This will load the 
-//    script and CSS for the MenuNav Node Plugin and all of the required 
+//    Call the "use" method, passing in "node-menunav".  This will load the
+//    script and CSS for the MenuNav Node Plugin and all of the required
 //    dependencies.
 
 YUI().use("node-menunav", function(Y) {
 
-    //    Use the "contentready" event to initialize the menu when the subtree of 
-    //    element representing the root menu (<div id="menu-1">) is ready to 
+    //    Use the "contentready" event to initialize the menu when the subtree of
+    //    element representing the root menu (<div id="menu-1">) is ready to
     //    be scripted.
 
     Y.on("contentready", function () {
 
-        //    The scope of the callback will be a Node instance representing 
+        //    The scope of the callback will be a Node instance representing
         //    the root menu (<div id="menu-1">).  Therefore, since "this"
         //    represents a Node instance, it is possible to just call "this.plug"
         //    passing in a reference to the MenuNav Node Plugin.
@@ -414,17 +414,17 @@ YUI().use("node-menunav", function(Y) {
 <h5>MenuItem Separators</h5>
 
 <p>
-The MenuNav Node Plugin makes it easy to create separators between items in a menu.  
-To separate items in a menu, simply place items in their own 
-`<ul>` elements inside their parent menu's content box, and  
-apply a class name of <code>first-of-type</code> to the first 
-`<ul>`.  The following code will render separators between 
+The MenuNav Node Plugin makes it easy to create separators between items in a menu.
+To separate items in a menu, simply place items in their own
+`<ul>` elements inside their parent menu's content box, and
+apply a class name of <code>first-of-type</code> to the first
+`<ul>`.  The following code will render separators between
 the "Zimbra" and "Address Book" items, and the "Notepad" and "Messenger" items.
 </p>
 
 ```
 <div id="pim" class="yui3-menu">
-    <div class="yui3-menu-content">    
+    <div class="yui3-menu-content">
 
         <ul class="first-of-type">
             <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
@@ -436,18 +436,18 @@ the "Zimbra" and "Address Book" items, and the "Notepad" and "Messenger" items.
             <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
             <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
         </ul>
-        
+
         <ul>
             <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
         </ul>
-        
-    </div>    
-</div>   
+
+    </div>
+</div>
 ```
 
 <p>
 With the separator markup in place, the default "Sam" skin will render a top border between each
-`<ul>` element, as illustrated in the following screen capture of one of the 
+`<ul>` element, as illustrated in the following screen capture of one of the
 MenuNav Node Plugin examples:
 </p>
 
@@ -456,46 +456,46 @@ MenuNav Node Plugin examples:
 <h3>Styling State</h3>
 
 <p>
-The MenuNav Node Plugin manages the state of a menu's descendants through the application and 
-removal of class names.  Class names representing state are constructed using the descendent's 
+The MenuNav Node Plugin manages the state of a menu's descendants through the application and
+removal of class names.  Class names representing state are constructed using the descendent's
 name followed by a suffix representing the state.  For example, hidden submenus have a class of
-<code>yui3-menu-hidden</code>.  Class names used to represent state are always applied to the 
+<code>yui3-menu-hidden</code>.  Class names used to represent state are always applied to the
 descendant's root node.  See the [[#CSS reference]] for the complete list of state class
-names. 
+names.
 </p>
 
 <h4>Active vs. Inactive</h4>
 
 <p>
-Menuitems and menu labels have a default (inactive) state and an active state.  Menuitems and 
-menu labels are considered active when the user is interacting with them via the keyboard or the 
+Menuitems and menu labels have a default (inactive) state and an active state.  Menuitems and
+menu labels are considered active when the user is interacting with them via the keyboard or the
 mouse.  The active class name applied to menuitems and menu labels has two benefits:  It provides
-a single entry point for styling state that would otherwise require the use of multiple CSS 
-pseudo classes (<code>:hover</code> and <code>:focus</code>).  The second benefit to the use of 
-the active class name is that it provides consistent styling of state across all types of elements in 
-all <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade browsers</a>.  
+a single entry point for styling state that would otherwise require the use of multiple CSS
+pseudo classes (<code>:hover</code> and <code>:focus</code>).  The second benefit to the use of
+the active class name is that it provides consistent styling of state across all types of elements in
+all <a href="http://developer.yahoo.com/yui/articles/gbs/">A-Grade browsers</a>.
 (IE 6 only supports the <code>:hover</code> and <code>:focus</code> pseudo classes on
-<code>&#60;a&#62;</code> elements.  And while IE 7 supports <code>:hover</code> on all elements, it 
+<code>&#60;a&#62;</code> elements.  And while IE 7 supports <code>:hover</code> on all elements, it
 only supports <code>:focus</code> pseudo class on <code>&#60;a&#62;</code> elements.)
 </p>
 
 <h4>Visible vs. Hidden</h4>
 
 <p>
-By default all submenus are hidden and that state is reflected by the application of the 
-<code>yui3-menu-hidden</code> class name.  If the <code>yui3-menu-hidden</code> class name is not 
+By default all submenus are hidden and that state is reflected by the application of the
+<code>yui3-menu-hidden</code> class name.  If the <code>yui3-menu-hidden</code> class name is not
 applied to the bounding box node of all submenus, it will automatically be applied by the MenuNav's
-constructor.  When a submenu is visible, the <code>yui3-menu-hidden</code> class name is removed 
+constructor.  When a submenu is visible, the <code>yui3-menu-hidden</code> class name is removed
 and a class <code>yui3-menu-label-menuvisible</code> is applied to the submenu's corresponding label.
 </p>
 
 <h3>Configuration Attributes</h3>
 
 <p>
-The MenuNav Node Plugin has several configuration attributes that can be set via an object literal 
-that is passed as a second argument to a Node instance's 
-<a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a> method.  (<em>Note:</em>  These 
-attributes are <em>case sensitive</em>.)  In the following example, the value of the 
+The MenuNav Node Plugin has several configuration attributes that can be set via an object literal
+that is passed as a second argument to a Node instance's
+<a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a> method.  (<em>Note:</em>  These
+attributes are <em>case sensitive</em>.)  In the following example, the value of the
 <code>mouseOutHideDelay</code> attribute is set to 1000.
 </p>
 
@@ -511,7 +511,7 @@ oMenuNav.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });
         <tr>
             <th>Name</th>
             <th>Default Value</th>
-            <th>Description</th>            
+            <th>Description</th>
         </tr>
     </thead>
     <tbody>
@@ -546,20 +546,20 @@ oMenuNav.plug(Y.Plugin.NodeMenuNav, { mouseOutHideDelay: 1000 });
 <h3>Handling Events</h3>
 
 <p>
-The MenuNav Node Plugin publishes no custom events of its own.  To listen for any DOM-related 
-events for a menu built using the MenuNav Node Plugin, use the <a href="{{apiDocs}}/classes/Node.html#method_on"><code>on</code></a> method of the 
-plugin's host Node instance.  The following example illustrates how to listen for the 
+The MenuNav Node Plugin publishes no custom events of its own.  To listen for any DOM-related
+events for a menu built using the MenuNav Node Plugin, use the <a href="{{apiDocs}}/classes/Node.html#method_on"><code>on</code></a> method of the
+plugin's host Node instance.  The following example illustrates how to listen for the
 <code>click</code> event of menu a built using the MenuNav Node Plugin:
 </p>
 
 ```
-// Get a Node instance for HTML element 
+// Get a Node instance for HTML element
 var oMenuNode = Y.one("#menu-nav-1");
 
 // Apply the MenuNav Node Plugin to the Node instance
 oMenuNode.plug(Y.Plugin.NodeMenuNav);
 
-// Register a "click" event listener to the Node instance using the "on" method 
+// Register a "click" event listener to the Node instance using the "on" method
 oMenuNode.on("click", function () {
 
     alert("here");
@@ -567,39 +567,39 @@ oMenuNode.on("click", function () {
 });
 ```
 
-<p>For additional information on listening for DOM-related events, see the 
-<a href="../node/index.html#node-events">DOM Events</a> section of the 
+<p>For additional information on listening for DOM-related events, see the
+<a href="../node/index.html#node-events">DOM Events</a> section of the
 <a href="../node/index.html">Node landing page</a>.
 </p>
 
 <h3>`<iframe>` Shim</h3>
 
 <p>
-The MenuNav Node Plugin uses an `<iframe>` shim to prevent 
-`<select>` elements from poking through submenus in IE 6.  The 
-`<iframe>` shim is only used for IE 6, and for performance its creation is 
+The MenuNav Node Plugin uses an `<iframe>` shim to prevent
+`<select>` elements from poking through submenus in IE 6.  The
+`<iframe>` shim is only used for IE 6, and for performance its creation is
 deferred until the first time a submenu is made visible.
 </p>
 
 <p>
-Once created, the 
-`<iframe>` shim is appended to the node representing a submenu's bounding box, 
-and is therefore a sibling of the the a submenu's content box.  All styling of the 
-`<iframe>` is handled by the core CSS file for the MenuNav Node Plugin, so 
-authors of custom skins won't have to worry about it.  The markup template used to create each 
-`<iframe>` is accessible via the 
-<a href="{{apiDocs}}/classes/Plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE"><code>SHIM_TEMPLATE</code></a> property.  
+Once created, the
+`<iframe>` shim is appended to the node representing a submenu's bounding box,
+and is therefore a sibling of the the a submenu's content box.  All styling of the
+`<iframe>` is handled by the core CSS file for the MenuNav Node Plugin, so
+authors of custom skins won't have to worry about it.  The markup template used to create each
+`<iframe>` is accessible via the
+<a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE"><code>SHIM_TEMPLATE</code></a> property.
 </p>
 
 <p>
-To help users of screen readers to avoid mistakenly interacting with the 
-`<iframe>` shim, its <code>tabindex</code> attribute is set to "-1" and its 
-title attribute is set to "Menu Stacking Shim".  The value of the `<iframe>`'s 
-<code>title</code> attribute is available via the 
-<a href="{{apiDocs}}/classes/Plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE_TITLE"><code>SHIM_TEMPLATE_TITLE</code></a>
-property for easy localization.  Lastly, the <code>src</code> attribute of the 
-`<iframe>` is set to "javascript:false;" so that it won't load a 
-page inside it, preventing the secure/nonsecure warning in IE when using the MenuNav Node Plugin 
+To help users of screen readers to avoid mistakenly interacting with the
+`<iframe>` shim, its <code>tabindex</code> attribute is set to "-1" and its
+title attribute is set to "Menu Stacking Shim".  The value of the `<iframe>`'s
+<code>title</code> attribute is available via the
+<a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#property_NodeMenuNav.SHIM_TEMPLATE_TITLE"><code>SHIM_TEMPLATE_TITLE</code></a>
+property for easy localization.  Lastly, the <code>src</code> attribute of the
+`<iframe>` is set to "javascript:false;" so that it won't load a
+page inside it, preventing the secure/nonsecure warning in IE when using the MenuNav Node Plugin
 with HTTPS.
 </p>
 
@@ -609,7 +609,7 @@ with HTTPS.
     <thead>
         <tr>
             <th>Class Name</th>
-            <th>Description</th>            
+            <th>Description</th>
         </tr>
     </thead>
     <tbody>
@@ -660,7 +660,7 @@ with HTTPS.
         <tr>
             <td>first-of-type</td>
             <td>
-                Applied to the first `<ul>` element inside each menu's 
+                Applied to the first `<ul>` element inside each menu's
                 content box.
             </td>
         </tr>
@@ -675,18 +675,18 @@ with HTTPS.
 
         <p>
             <img src="{{componentAssets}}/select-issue.png" style="width:370px; height:257px; float:right;" alt="Screen capture of an open HTML select-based menu poking through the submenu of a menu created using the MenuNav Node Plugin">
-            In Safari 3 and IE 6 the `<select>` element's 
-            popup menu is modal&#151;making it impossible to interact with any 
-            of the other elements on the page, and therefore impossible to both 
-            trigger the display of a DHTML menu and impossible for the 
-            `<select>` element's popup menu to potentially 
+            In Safari 3 and IE 6 the `<select>` element's
+            popup menu is modal&#151;making it impossible to interact with any
+            of the other elements on the page, and therefore impossible to both
+            trigger the display of a DHTML menu and impossible for the
+            `<select>` element's popup menu to potentially
             poke through a DHTML menu.
         </p>
         <p>
-            In all other browsers, a `<select>` element's 
-            popup menu is both <em>not</em> modal and has a zindex higher than 
-            any other element.  The established best practice of using an 
-            `<iframe>` element has a shim does not fix the 
+            In all other browsers, a `<select>` element's
+            popup menu is both <em>not</em> modal and has a zindex higher than
+            any other element.  The established best practice of using an
+            `<iframe>` element has a shim does not fix the
             problem.  Currently there is no fix for this issue.
         </p>
     </li>
diff --git a/src/node-menunav/docs/node-menunav-2-example.mustache b/src/node-menunav/docs/node-menunav-2-example.mustache
new file mode 100644
index 00000000000..0e0d8d9c022
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-2-example.mustache
@@ -0,0 +1,195 @@
+<h1>Header</h1>
+<div class="yui3-g" id="bd">
+    <div class="yui3-u" id="side">
+        <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+    </div>
+
+    <div class="yui3-u" id="main">
+       <div id="productsandservices" class="yui3-menu yui3-menu-horizontal">
+            <div class="yui3-menu-content">
+                <ul class="first-of-type">
+                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
+                    <li>
+                        <a class="yui3-menu-label" href="#connect">Connect</a>
+                        <div id="connect" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                    <li>
+                                        <a class="yui3-menu-label" href="#pim">PIM</a>
+                                        <div id="pim" class="yui3-menu">
+                                            <div class="yui3-menu-content">
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
+                                                </ul>
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
+                                                </ul>
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
+                                                </ul>
+
+                                            </div>
+                                        </div>
+                                    </li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#find-info">Find Info</a>
+                        <div id="find-info" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#lifestyles">Lifestyles</a>
+                        <div id="lifestyles" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#new-finance">News &#38; Finance</a>
+                        <div id="new-finance" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#your-yahoo">Your Yahoo!</a>
+                        <div id="your-yahoo" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li>
+                                </ul>
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+
+        <p class="first-of-type">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <form>
+
+            <div>
+                <label for="field-1">Field One</label>
+                <input type="text" id="field-1" name="field-1">
+            </div>
+
+            <div>
+                <label for="field-2">Field Two</label>
+                <input type="text" id="field-2" name="field-2">
+            </div>
+
+            <div>
+                <label for="field-3">Field Three</label>
+                <select id="field-3" name="field-3">
+                    <option value="1">Field Three - Option One</option>
+                    <option value="2">Field Three - Option Two</option>
+                    <option value="3">Field Three - Option Two</option>
+                </select>
+            </div>
+
+        </form>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
+    </div>
+</div>
+
+<div id="footer">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script>
+
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI().use('node-menunav', function(Y) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">) and call the "plug" method
+        //  passing in a reference to the MenuNav Node Plugin.
+
+        var menu = Y.one("#productsandservices");
+
+        menu.plug(Y.Plugin.NodeMenuNav);
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-2.mustache b/src/node-menunav/docs/node-menunav-2.mustache
new file mode 100644
index 00000000000..ddddc6f68d1
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-2.mustache
@@ -0,0 +1,75 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to create a traditional, two-column page layout (<a href="../cssgrids/index.html">using Grids</a>) with top navigation featuring drop-down menus.
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-2-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Setting Up the HTML</h2>
+
+<p>
+Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid
+markup (this example uses a 2 column version of the
+<a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column).
+Add the markup for the menu to the left column of the grid, and the class <code>yui3-skin-sam</code>
+to the <code>&#60;body&#62;</code>.
+</p>
+
+<p>
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation.  The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
+root menu's bounding box, as illustrated below:
+</p>
+
+```
+<div id="productsandservices" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+```
+
+
+<h2>Initializing the Menu</h2>
+<p>
+With the menu markup in place, retrieve the Node instance representing the root
+menu (<code>&#60;div id="productsandservices"&#62;</code>) and call the
+<a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a>
+passing in a reference to the MenuNav Node Plugin.
+</p>
+
+```
+//  Call the "use" method, passing in "node-menunav".  This will load the
+//  script and CSS for the MenuNav Node Plugin and all of the required
+//  dependencies.
+
+YUI().use('node-menunav', function(Y) {
+
+    //  Retrieve the Node instance representing the root menu
+    //  (<div id="productsandservices">) and call the "plug" method
+    //  passing in a reference to the MenuNav Node Plugin.
+
+    var menu = Y.one("#productsandservices");
+
+    menu.plug(Y.Plugin.NodeMenuNav);
+
+});
+```
+
+<p>
+<em>Note:</em> In keeping with the
+<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
+team's recommendation, the script block used to instantiate the menu will be
+<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<code>&#60;div id="productsandservices"&#62;</code>) is ready to be scripted.
+</p>
diff --git a/src/node-menunav/docs/node-menunav-3-example.mustache b/src/node-menunav/docs/node-menunav-3-example.mustache
new file mode 100644
index 00000000000..d99951dda49
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-3-example.mustache
@@ -0,0 +1,195 @@
+<h1>Header</h1>
+<div class="yui3-g" id="bd">
+    <div class="yui3-u" id="side">
+        <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+    </div>
+
+    <div class="yui3-u" id="main">
+       <div id="productsandservices" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
+            <div class="yui3-menu-content">
+                <ul class="first-of-type">
+                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
+                    <li>
+                        <a class="yui3-menu-label" href="#connect"><em>Connect</em></a>
+                        <div id="connect" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                    <li>
+                                        <a class="yui3-menu-label" href="#pim">PIM</a>
+                                        <div id="pim" class="yui3-menu">
+                                            <div class="yui3-menu-content">
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
+                                                </ul>
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
+                                                </ul>
+
+                                                <ul>
+                                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
+                                                </ul>
+
+                                            </div>
+                                        </div>
+                                    </li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#find-info"><em>Find Info</em></a>
+                        <div id="find-info" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#lifestyles"><em>Lifestyles</em></a>
+                        <div id="lifestyles" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#new-finance"><em>News &#38; Finance</em></a>
+                        <div id="new-finance" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                    <li>
+                        <a class="yui3-menu-label" href="#your-yahoo"><em>Your Yahoo!</em></a>
+                        <div id="your-yahoo" class="yui3-menu">
+                            <div class="yui3-menu-content">
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li>
+                                </ul>
+                                <ul>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li>
+                                    <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+
+        <p class="first-of-type">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <form>
+
+            <div>
+                <label for="field-1">Field One</label>
+                <input type="text" id="field-1" name="field-1">
+            </div>
+
+            <div>
+                <label for="field-2">Field Two</label>
+                <input type="text" id="field-2" name="field-2">
+            </div>
+
+            <div>
+                <label for="field-3">Field Three</label>
+                <select id="field-3" name="field-3">
+                    <option value="1">Field Three - Option One</option>
+                    <option value="2">Field Three - Option Two</option>
+                    <option value="3">Field Three - Option Two</option>
+                </select>
+            </div>
+
+        </form>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    </div>
+
+</div>
+
+<div id="footer">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script>
+
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI().use('node-menunav', function(Y) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">) and call the "plug" method
+        //  passing in a reference to the MenuNav Node Plugin.
+
+        var menu = Y.one("#productsandservices");
+
+        menu.plug(Y.Plugin.NodeMenuNav);
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-3.mustache b/src/node-menunav/docs/node-menunav-3.mustache
new file mode 100644
index 00000000000..aed9f3cf4de
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-3.mustache
@@ -0,0 +1,118 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to create a traditional, two-column page layout (<a href="../cssgrids/index.html">using Grids</a>) with top navigation rendered like menu buttons.
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-3-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Setting Up the HTML</h2>
+
+<p>
+Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid
+markup (this example uses a 2 column version of the
+<a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column).
+Add the markup for the menu to the left column of the grid, and the class <code>yui3-skin-sam</code>
+to the <code>&#60;body&#62;</code>.
+</p>
+
+<p>
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation.  The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
+root menu's bounding box, as illustrated below:
+</p>
+
+```
+<div id="productsandservices" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+```
+
+<p>
+To render each menu label in the horizontal menu as a menu button, add the class
+<code>yui3-menubuttonnav</code> to the node representing the root menu's bounding box, as
+illustrated below:
+</p>
+
+```
+<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+```
+
+<p>
+Next, wrap the text node of each menu label of the root menu in an
+<code>&#60;em&#62;</code> element:
+</p>
+
+```
+<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+
+            <li>
+                <a class="yui3-menu-label" href="#submenu-1"><em>Submenu Label</em></a>
+                <div id="submenu-1" class="yui3-menu">
+                    <div class="yui3-menu-content">
+
+                        <!-- submenu content -->
+
+                    </div>
+                </div>
+            </li>
+
+        </ul>
+    </div>
+</div>
+```
+
+
+<h2>Initializing the Menu</h2>
+<p>
+With the menu markup in place, retrieve the Node instance representing the root
+menu (<code>&#60;div id="productsandservices"&#62;</code>) and call the
+<a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a>
+passing in a reference to the MenuNav Node Plugin.
+</p>
+
+```
+//  Call the "use" method, passing in "node-menunav".  This will load the
+//  script and CSS for the MenuNav Node Plugin and all of the required
+//  dependencies.
+
+YUI().use('node-menunav', function(Y) {
+
+    //  Retrieve the Node instance representing the root menu
+    //  (<div id="productsandservices">) and call the "plug" method
+    //  passing in a reference to the MenuNav Node Plugin.
+
+    var menu = Y.one("#productsandservices");
+
+    menu.plug(Y.Plugin.NodeMenuNav);
+
+});
+```
+
+<p>
+<em>Note:</em> In keeping with the
+<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
+team's recommendation, the script block used to instantiate the menu will be
+<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<code>&#60;div id="productsandservices"&#62;</code>) is ready to be scripted.
+</p>
+
diff --git a/src/node-menunav/docs/node-menunav-4-example.mustache b/src/node-menunav/docs/node-menunav-4-example.mustache
new file mode 100644
index 00000000000..12fdf6a3c46
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-4-example.mustache
@@ -0,0 +1,189 @@
+<h1>Header</h1>
+
+<div class="yui3-g" id="bd">
+<div class="yui3-u" id="side">
+    <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+</div>
+
+<div class="yui3-u" id="main">
+    <div id="productsandservices" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav">
+        <div class="yui3-menu-content">
+            <ul class="first-of-type">
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://answers.yahoo.com">Answers</a>
+                        <a href="#answers-options" class="yui3-menu-toggle">Answers Options</a>
+                    </span>
+
+                    <div id="answers-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://www.flickr.com">Flickr</a>
+                        <a href="#flickr-options" class="yui3-menu-toggle">Flickr Options</a>
+                    </span>
+
+                    <div id="flickr-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/explore/">Explore</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/groups/">Groups</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/photos/organize/">Organize Your Photos</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://flickr.com/photos/friends/">Photos From Contacts</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/signup/">Sign Up</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/tour/">Take a Tour</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://mobile.yahoo.com">Mobile</a>
+                        <a href="#mobile-options" class="yui3-menu-toggle">Mobile Options</a>
+                    </span>
+
+                    <div id="mobile-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/developers">Developers Home</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/mail">Mail</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/gallery">Widget Gallery</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/oneconnect">Y! oneConnect</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/go">Yahoo! Go</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/iphone">Yahoo! on the iPhone</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/mail">More Mobile Services</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://upcoming.yahoo.com/">Upcoming</a>
+                        <a href="#upcoming-options" class="yui3-menu-toggle">Upcoming Options</a>
+                    </span>
+
+                    <div id="upcoming-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/event/add/">Add New Event</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/event/">Events</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/friend/">Friends</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/group/">Groups</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/place/">Places</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/popular/">Popular</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a>
+                        <a href="#for-good-options" class="yui3-menu-toggle">Yahoo! for Good Options</a>
+                    </span>
+
+                    <div id="for-good-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/donate.html">Donate</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/everyday_heroes/index.html">Everyday Heroes</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/go_green/index.html">Go Green</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/good_causes/index.html">Good Causes</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/purple_acts/index.html">Purple Acts</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/social_responsibility/index.html">Social Responsibility</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/index.html">Take Action</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/volunteer.html">Volunteer</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+            </ul>
+        </div>
+    </div>
+
+    <p class="first-of-type">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <form>
+
+        <div>
+            <label for="field-1">Field One</label>
+            <input type="text" id="field-1" name="field-1">
+        </div>
+
+        <div>
+            <label for="field-2">Field Two</label>
+            <input type="text" id="field-2" name="field-2">
+        </div>
+
+        <div>
+            <label for="field-3">Field Three</label>
+            <select id="field-3" name="field-3">
+                <option value="1">Field Three - Option One</option>
+                <option value="2">Field Three - Option Two</option>
+                <option value="3">Field Three - Option Two</option>
+            </select>
+        </div>
+
+    </form>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+</div>
+</div>
+
+<div id="footer">
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script>
+
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI().use('node-menunav', function(Y) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">) and call the "plug" method
+        //  passing in a reference to the MenuNav Node Plugin.
+
+        var menu = Y.one("#productsandservices");
+
+        menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-4.mustache b/src/node-menunav/docs/node-menunav-4.mustache
new file mode 100644
index 00000000000..f3e52de6f28
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-4.mustache
@@ -0,0 +1,148 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to create a traditional, two-column page layout
+    (<a href="../cssgrids/index.html">using Grids</a>) with top navigation rendered like split buttons.
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-4-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Setting Up the HTML</h2>
+<p>
+Begin by including the <a href="../cssgrids/index.html#dependencies">CSS Grids dependencies</a> and grid
+markup (this example uses a 2 column version of the
+<a href="../cssgrids/cssgrids-fluid.html">Fluid Page Template</a> with a 160px left column).
+Add the markup for the menu to the left column of the grid, and the class <code>yui3-skin-sam</code>
+to the <code>&#60;body&#62;</code>.
+</p>
+
+<p>
+The root menu of menus built using the MenuNav Node Plugin can have a verical or horizontal
+orientation.  The default orientation for menus is vertical, but can be easily switched to
+horizontal by applying a class of <code>yui3-menu-horizontal</code> to the node representing the
+root menu's bounding box, as illustrated below:
+</p>
+
+```
+<div id="productsandservices" class="yui3-menu yui3-menu-horizontal"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+```
+
+<p>
+To render each menu label in the horizontal menu as a split button, add the class
+<code>yui3-splitbuttonnav</code> to the node representing the root menu's bounding box, as
+illustrated below:
+</p>
+
+```
+<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <!-- Menu items -->
+        </ul>
+    </div>
+</div>
+```
+
+<p>
+Next, define the markup for each menu label.  Start with a <code>&#60;span&#62;</code> with a class
+of <code>yui3-menu-label</code> applied.  Inside the <code>&#60;span&#62;</code>, place two
+<code>&#60;a&#62;</code> elements &#151; one for each of the label's two clickable regions.
+Each <code>&#60;a&#62;</code> has separate, but related responsibilities:  The first
+<code>&#60;a&#62;</code> represents the label's default action.  The second <code>&#60;a&#62;</code>
+toggles the display of a submenu whose content contains other options related to, or in the same
+category of the default action.  Therefore to configure the first <code>&#60;a&#62;</code>,
+simply set its <code>href</code> attribute to any URL.  For the second <code>&#60;a&#62;</code>,
+apply a class name of <code>yui3-menu-toggle</code>, and set the value of the <code>href</code>
+attribute to the id of the label's corresponding submenu.  Lastly, the text node of the second
+<code>&#60;a&#62;</code> should label the contents of its corresponding submenu.
+</p>
+
+```
+<div id="menu-1" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav"><!-- Bounding box -->
+    <div class="yui3-menu-content"><!-- Content box -->
+        <ul>
+            <li>
+
+                <span class="yui3-menu-label"><!-- menu label root node -->
+                    <a href="http://answers.yahoo.com">Answers</a><!-- menu label default action -->
+                    <a href="#answers-options" class="yui3-menu-toggle">Answers Options</a><!-- menu label submenu toggle -->
+                </span>
+
+                <div id="answers-options" class="yui3-menu">
+                    <div class="yui3-menu-content">
+                        <ul>
+                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
+                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
+                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
+                            <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
+                        </ul>
+                    </div>
+                </div>
+
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
+<h2>Initializing the Menu</h2>
+<p>
+With the menu markup in place, retrieve the Node instance representing the root
+menu (<code>&#60;div id="productsandservices"&#62;</code>) and call the
+<a href="{{apiDocs}}/classes/Node.html#method_plug"><code>plug</code></a>
+passing in a reference to the MenuNav Node Plugin.
+</p>
+
+<p>
+Use the
+<a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_autoSubmenuDisplay"><code>autoSubmenuDisplay</code></a>
+and <a href="{{apiDocs}}/classes/plugin.NodeMenuNav.html#config_mouseOutHideDelay"><code>mouseOutHideDelay</code></a>
+configuration attributes to configure the menu labels to behave like split buttons.  Set the
+<code>autoSubmenuDisplay</code> to <code>false</code>, so that each menu label's submenu isn't
+made visible until the menu trigger is clicked.  Set the <code>mouseOutHideDelay</code> to
+<code>0</code> so that a label's submenu is only hidden when the user mouses down on an area
+outside of the submenu.
+</p>
+
+```
+<!-- YUI Seed -->
+<script src="{{yuiSeedUrl}}"></script>
+
+<script>
+//  Call the "use" method, passing in "node-menunav".  This will load the
+//  script and CSS for the MenuNav Node Plugin and all of the required
+//  dependencies.
+
+YUI().use('node-menunav', function(Y) {
+
+    //  Retrieve the Node instance representing the root menu
+    //  (<div id="productsandservices">) and call the "plug" method
+    //  passing in a reference to the MenuNav Node Plugin.
+
+    var menu = Y.one("#productsandservices");
+
+    menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
+
+});
+</script>
+```
+
+<p>
+<em>Note:</em> In keeping with the
+<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
+team's recommendation, the script block used to instantiate the menu will be
+<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<code>&#60;div id="productsandservices"&#62;</code>) is ready to be scripted.
+</p>
diff --git a/src/node-menunav/docs/node-menunav-5-example.mustache b/src/node-menunav/docs/node-menunav-5-example.mustache
new file mode 100644
index 00000000000..c8dcae43085
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-5-example.mustache
@@ -0,0 +1,234 @@
+<style>
+.yui3-menu-shadow {
+
+    position: absolute;
+    z-index: -1;
+    top: 2px;
+    left: -3px;
+    background-color: #000;
+    opacity: .12;
+    filter: alpha(opacity=12);  /*  For IE since it doesn't implement the CSS3
+                                    "opacity" property. */
+    padding: 1px 3px 0 3px;
+    width: 100%;
+    height: 100%;
+
+}
+
+#productsandservices .yui3-menu .yui3-shim {
+
+    z-index: -2;    /* Place the iframe shim behind the shadow element */
+
+    /*
+        Adjust the dimensions of the <iframe> shim to match the shadow,
+        otherwise <select> elements will poke through the shadow.
+    */
+
+    left: -3px;
+    padding: 3px 3px 0 3px;
+
+}
+</style>
+
+<h1>Header</h1>
+
+<div class="yui3-g" id="bd">
+    <div class="yui3-u" id="side">
+        <div class="content">
+           <div id="productsandservices" class="yui3-menu">
+                <div class="yui3-menu-content">
+                    <ul class="first-of-type">
+                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
+                        <li>
+                            <a class="yui3-menu-label" href="#connect">Connect</a>
+                            <div id="connect" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                        <li>
+                                            <a class="yui3-menu-label" href="#pim">PIM</a>
+                                            <div id="pim" class="yui3-menu">
+                                                <div class="yui3-menu-content">
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
+                                                    </ul>
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
+                                                    </ul>
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
+                                                    </ul>
+
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#find-info">Find Info</a>
+                            <div id="find-info" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#lifestyles">Lifestyles</a>
+                            <div id="lifestyles" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#new-finance">News &#38; Finance</a>
+                            <div id="new-finance" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#your-yahoo">Your Yahoo!</a>
+                            <div id="your-yahoo" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li>
+                                    </ul>
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="yui3-u" id="main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <form>
+
+            <div>
+                <label for="field-1">Field One</label>
+                <input type="text" id="field-1" name="field-1">
+            </div>
+
+            <div>
+                <label for="field-2">Field Two</label>
+                <input type="text" id="field-2" name="field-2">
+            </div>
+
+            <div>
+                <label for="field-3">Field Three</label>
+                <select id="field-3" name="field-3">
+                    <option value="1">Field Three - Option One</option>
+                    <option value="2">Field Three - Option Two</option>
+                    <option value="3">Field Three - Option Two</option>
+                </select>
+            </div>
+
+        </form>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+</div>
+
+<div id="footer">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script>
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI().use('node-menunav', function(Y) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">)
+
+        var menu = Y.one("#productsandservices");
+
+
+        //  Use the "all" method to retrieve the
+        //  Node instances representing each submenu.
+
+        menu.all(".yui3-menu").each(function (node) {
+
+            // Append a shadow element to the bounding box of each submenu
+
+            node.append('<div class="yui3-menu-shadow"></div>');
+
+        });
+
+
+        //  Call the "plug" method of the Node instance, passing in a reference to the
+        //  MenuNav Node Plugin.
+
+        menu.plug(Y.Plugin.NodeMenuNav);
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-5.mustache b/src/node-menunav/docs/node-menunav-5.mustache
new file mode 100644
index 00000000000..6431a6a55eb
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-5.mustache
@@ -0,0 +1,157 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to add shadows to submenus of a menu built using the MenuNav Node
+    Plugin.
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-5-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Creating the Shadow HTML</h2>
+<p>
+One way to add shadows to submenus is to append decorator elements to the node representing a
+submenu's bounding box.  As the name implies, decorator elements add no semantic value to the
+markup, but enable additional styles to be applied.  When adding any decorator elements to create
+effects like shadows or rounded corners, always add those elements via JavaScript, since it is only
+when JavaScript is enabled that a menu's markup is transformed in a drop-down menu system via the
+MenuNav Node Plugin.
+</p>
+
+<p>
+Each shadow will be represented in HTML as a single <code>&#60;div&#62;</code> element with a class
+of <code>yui3-menu-shadow</code> applied, and can easily be created by passing a string of HTML
+to Node's <a href="{{apiDocs}}/classes/Node.html#method_create"><code>create</code></a> method.  Use the
+<a href="{{apiDocs}}/classes/Node.html#method_all"><code>all</code></a> method to
+retrieve Node instances for each submenu, and the
+<a href="{{apiDocs}}/classes/Node.html#method_append"><code>append</code></a> method to add the
+shadow to each submenu.
+</p>
+
+```
+//  Call the "use" method, passing in "node-menunav".  This will load the
+//  script and CSS for the MenuNav Node Plugin and all of the required
+//  dependencies.
+
+YUI().use('node-menunav', function(Y) {
+
+    //  Retrieve the Node instance representing the root menu
+    //  (<div id="productsandservices">)
+
+    var menu = Y.one("#productsandservices");
+
+
+    //  Use the "all" method to retrieve the
+    //  Node instances representing each submenu.
+
+    menu.all(".yui3-menu").each(function (node) {
+
+        // Append a shadow element to the bounding box of each submenu
+
+        node.append('<div class="yui3-menu-shadow"></div>');
+
+    });
+
+
+    //  Call the "plug" method of the Node instance, passing in a reference to the
+    //  MenuNav Node Plugin.
+
+    menu.plug(Y.Plugin.NodeMenuNav);
+
+    //  Show the menu now that it is ready
+
+    menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+});
+```
+<em>Note:</em> In keeping with the
+<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
+team's recommendation, the script block used to instantiate the menu will be
+<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<code>&#60;div id="productsandservices"&#62;</code>) is ready to be scripted.
+</p>
+
+<h2>Styling the Shadow HTML</h2>
+<p>
+With the shadow element appended to each submenu, the next step is to define the style for the
+shadow.  The shadows in this example will be 12% alpha transparent black, and offset from the left,
+bottom, and right edges of each submenu's content box by 3px.  To create this effect, start by
+setting the <code>position</code> property to <code>absolute</code> and the <code>z-index</code>
+property to <code>-1</code>.  This will position each submenu's shadow behind its content box.  For
+the 12% alpha transparent black color, set the <code>background-color</code> to <code>#000</code>
+and <code>opacity</code> property to <code>.12</code>.
+</p>
+
+<p>
+Next, set the both the <code>width</code> and <code>height</code> properties to <code>100%</code>
+so that the dimensions of the <code>shadow</code> match that of each submenu's bounding box.
+(<em>Note:</em>  Setting the <code>height</code> property to <code>100%</code> won't work in IE 6
+Strict Mode unless the element's parent element has a height defined.  For this reason the the
+MenuNav Node Plugin automatically sets the <code>width</code> and <code>height</code> properties of
+each submenu's bounding box to the values of its <code>offsetWidth</code> and
+<code>offsetHeight</code> properties before it is made visible.)
+</p>
+
+<p>
+To create the three-sided effect for the shadow, set the <code>padding</code> property to
+<code>1px 3px 0 3px</code>.  As the CSS Box Model specifies that the value for padding is used to
+calculate the total width of of an element, the addition of the padding to the shadow makes the
+rendered width of the shadow 6px wider (100% + 6px) and 1px taller (100% + 1px) than that of each
+submenu's bounding box.  Finally, setting the <code>top</code> property to <code>2px</code> and
+the <code>left</code> property to <code>-3px</code> will position the shadow so that its offset
+from the left, bottom, and right edge of each submenu's content box by 3px.
+</p>
+
+```
+.yui3-menu-shadow {
+
+    position: absolute;
+    z-index: -1;
+    top: 2px;
+    left: -3px;
+
+    background-color: #000;
+    opacity: .12;
+    filter: alpha(opacity=12);  /*  For IE since it doesn't implement the CSS3
+                                    "opacity" property. */
+
+    padding: 1px 3px 0 3px;
+    width: 100%;
+    height: 100%;
+
+}
+```
+
+<p>
+Lastly, it is necessary to modify the position and dimensions of the <code>&#60;iframe&#62;</code>
+shim, otherwise <code>&#60;select&#62;</code> elements will poke through each submenu's shadow in
+IE 6.  Start by setting the <code>z-index</code> property to <code>-2</code> so that the
+<code>&#60;iframe&#62;</code> shim is behind the shadow element.  Next, set the <code>padding</code>
+property to <code>3px 3px 0 3px</code>.  The core CSS file for MenuNav already sets the
+<code>height</code> and <code>width</code> properties to <code>100%</code>, so the addition of the
+padding will result in the calculated width and height of the <code>&#60;iframe&#62;</code> shim
+being 100% + 6px and 100% + 3px respectively &#151; enough to shim the shadow.  Lastly, setting the
+<code>left</code> property to <code>-1</code> syncs the left edge of the
+<code>&#60;iframe&#62;</code> with that of the shadow.
+</p>
+
+```
+#productsandservices .yui3-menu .yui3-shim {
+
+    z-index: -2;    /* Place the iframe shim behind the shadow element */
+
+    /*
+        Adjust the dimensions of the <iframe> shim to match the shadow,
+        otherwise <select> elements will poke through the shadow.
+    */
+
+    left: -3px;
+    padding: 3px 3px 0 3px;
+
+}
+```
diff --git a/src/node-menunav/docs/node-menunav-6-example.mustache b/src/node-menunav/docs/node-menunav-6-example.mustache
new file mode 100644
index 00000000000..7f52af6dc8e
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-6-example.mustache
@@ -0,0 +1,288 @@
+<style>
+
+    /*
+        Overide the values for border and padding specified for the content box of each
+        submenu in the Sam skin CSS.  The top and bottom borders are set to 0, since both
+        borders will be drawn by the background image used to create the rounded corners.
+        The top and bottom padding will be created by setting the height of each <div>
+        inside the <div class="yui3-menu-corner">.
+    */
+
+    #productsandservices .yui3-menu .yui3-menu-content {
+
+        border-top: 0;
+        border-bottom: 0;
+        padding: 0;
+
+    }
+
+    .yui3-menu-corner {
+
+        margin-right: 4px;  /*  Reserve space for the top-right and bottom-right corners. */
+
+        /* The background image (sprite) for the top-left and bottom-left corners. */
+        background: url({{componentAssets}}/round.png) no-repeat;
+        zoom:1; /* IE: corners require layout */
+
+    }
+
+    .yui3-menu-corner div {
+
+        height: 4px;
+
+        margin: 0 -4px 0 4px;   /*  Use a negative right margin to move the <div> into
+                                    the right margin of the parent element
+                                    (<div class="yui3-menu-corner">) to draw the top-right
+                                    and bottom-right corners.
+
+                                    Apply a left margin to reveal the background image
+                                    applied to the parent element for the top-left and
+                                    bottom-left corners. */
+
+        /* The background image (sprite) for the top-right and bottom-right corners. */
+        background: url({{componentAssets}}/round.png) no-repeat;
+
+        _position: relative;    /*  Necessary to get negative margins working in IE 6
+                                    (Standards Mode and Quirks Mode and IE 7 (Quirks
+                                    Mode only). */
+
+        _font-size: 0;  /*  Necessary to collapse the height of the <div> in IE 6
+                            (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so
+                            that it renders at 4px tall.  */
+
+    }
+
+    /*
+        Set the "background-position" property for the bottom-left, top-right, and
+        bottom-right corner elements to reveal the corresponding corner image.
+    */
+
+    .yui3-menu-corner-bl {
+
+        background-position: left bottom;
+
+    }
+
+    .yui3-menu-corner .yui3-menu-corner-tr {
+
+        background-position: top right;
+
+    }
+
+    .yui3-menu-corner .yui3-menu-corner-br {
+
+        background-position: right bottom;
+
+    }
+
+</style>
+
+<h1>Header</h1>
+<div class="yui3-g" id="bd">
+    <div class="yui3-u" id="side">
+        <div class="content">
+           <div id="productsandservices" class="yui3-menu">
+                <div class="yui3-menu-content">
+                    <ul class="first-of-type">
+                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.yahoo.com/">Home</a></li>
+                        <li>
+                            <a class="yui3-menu-label" href="#connect">Connect</a>
+                            <div id="connect" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://developer.yahoo.com/">Developer Network</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                        <li>
+                                            <a class="yui3-menu-label" href="#pim">PIM</a>
+                                            <div id="pim" class="yui3-menu">
+                                                <div class="yui3-menu-content">
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mail.yahoo.com">Mail</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.zimbra.com">Zimbra</a></li>
+                                                    </ul>
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Address Book</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Calendar</a></li>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Notepad</a></li>
+                                                    </ul>
+
+                                                    <ul>
+                                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://messenger.yahoo.com">Messenger</a></li>
+                                                    </ul>
+
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://profiles.yahoo.com">Profiles</a> </li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com">Mobile</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mybloglog.yahoo.com/">MyBlogLog</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com/">Pride</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/">Upcoming</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#find-info">Find Info</a>
+                            <div id="find-info" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com">Answers</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://babelfish.yahoo.com/">Babel Fish Translations</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://info.yahoo.com/">Company Info</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://search.yahoo.com/cc">Creative Commons Search</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://dir.yahoo.com/">Directory</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://hotjobs.yahoo.com/">Jobs</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://local.yahoo.com">Local</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://maps.yahoo.com/">Maps</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://realestate.yahoo.com">Real Estate</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://education.yahoo.com/reference/">Reference</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#lifestyles">Lifestyles</a>
+                            <div id="lifestyles" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://autos.yahoo.com">Autos</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://food.yahoo.com">Food</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://green.yahoo.com">Green</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://health.yahoo.com">Health</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pride.yahoo.com">Pride</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://shine.yahoo.com">Shine</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://tech.yahoo.com">Tech</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://travel.yahoo.com/">Travel</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#new-finance">News &#38; Finance</a>
+                            <div id="new-finance" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://buzz.yahoo.com/">Buzz</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://finance.yahoo.com">Finance</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://news.yahoo.com">News</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://publisher.yahoo.com">Publisher Network</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://sports.yahoo.com/">Sports</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://weather.yahoo.com/">Weather</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                        <li>
+                            <a class="yui3-menu-label" href="#your-yahoo">Your Yahoo!</a>
+                            <div id="your-yahoo" class="yui3-menu">
+                                <div class="yui3-menu-content">
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://edit.yahoo.com/config/eval_profile?.done">Account Information</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://alerts.yahoo.com/">Alerts</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://smallbusiness.yahoo.com/domains">Domains</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com">Flickr</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://my.yahoo.com/">My Yahoo!</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://pipes.yahoo.com/">Pipes</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://toolbar.yahoo.com/">Toolbar</a></li>
+                                    </ul>
+                                    <ul>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://bookmarks.yahoo.com/">Bookmarks</a></li>
+                                        <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://delicious.com/">delicious</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="yui3-u" id="main">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+        <form>
+
+            <div>
+                <label for="field-1">Field One</label>
+                <input type="text" id="field-1" name="field-1">
+            </div>
+
+            <div>
+                <label for="field-2">Field Two</label>
+                <input type="text" id="field-2" name="field-2">
+            </div>
+
+            <div>
+                <label for="field-3">Field Three</label>
+                <select id="field-3" name="field-3">
+                    <option value="1">Field Three - Option One</option>
+                    <option value="2">Field Three - Option Two</option>
+                    <option value="3">Field Three - Option Two</option>
+                </select>
+            </div>
+
+        </form>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    </div>
+</div>
+
+<div id="footer">
+    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script>
+
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI().use('node-menunav', function(Y) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">)
+
+        var menu = Y.one("#productsandservices");
+
+
+        //  Use the "all" method to retrieve the
+        //  Node instances representing each submenu.
+
+        menu.all(".yui3-menu").each(function (node) {
+
+            //  Add decorator elements used to create the rounded corners to the
+            //  bounding box of each submenu.
+
+            // Insert the first decorator before the submenu's content box
+            node.prepend('<div class="yui3-menu-corner yui3-menu-corner-tl"><div class="yui3-menu-corner-tr"></div></div>');
+
+            // Insert the second decorator after the submenu's content box
+            node.append('<div class="yui3-menu-corner yui3-menu-corner-bl"><div class="yui3-menu-corner-br"></div></div>');
+
+        });
+
+
+        //  Call the "plug" method of the Node instance, passing in a reference to the
+        //  MenuNav Node Plugin.
+
+        menu.plug(Y.Plugin.NodeMenuNav);
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-6.mustache b/src/node-menunav/docs/node-menunav-6.mustache
new file mode 100644
index 00000000000..419653549fd
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-6.mustache
@@ -0,0 +1,212 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to add rounded corners to submenus of a menu built using the
+    MenuNav Node Plugin.
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-6-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Creating the Rounded Corner HTML</h2>
+<p>
+One way to add rounded corners to submenus is to append decorator elements to the node representing
+a submenu's bounding box.  As the name implies, decorator elements add no semantic value to the
+markup, but enable additional styles to be applied.  When adding any decorator elements to create
+effects like shadows or rounded corners, always add those elements via JavaScript, since it is only
+when JavaScript is enabled that a menu's markup is transformed in a drop-down menu system via the
+MenuNav Node Plugin.
+</p>
+
+<p>
+Each rounded corner is created by applying a background image to a <code>&#60;div&#62;</code>.
+A class name identifying the corner will be added to each <code>&#60;div&#62;</code>.
+The <code>&#60;div&#62;</code>s used to create the right corners will be nested inside the
+<code>&#60;div&#62;</code>s used to create the left corners, and each <code>&#60;div&#62;</code>
+for the left corners will have an additional class name of <code>yui3-menu-corner</code>.  The
+template for each set of rounded corners comes together as follows:
+</p>
+
+```
+<!-- top-left and top-right corners -->
+<div class="yui3-menu-corner yui3-menu-corner-tl"><div class="yui3-menu-corner-tr"></div></div>
+
+<!-- bottom-left and bottom-right corners -->
+<div class="yui3-menu-corner yui3-menu-corner-bl"><div class="yui3-menu-corner-br"></div></div>
+```
+
+<p>
+The <code>&#60;div&#62;</code>s for each corner is created by passing a string
+of HTML to Node's <a href="{{apiDocs}}/classes/Node.html#method_create"><code>create</code></a> method.  Use
+the <a href="{{apiDocs}}/classes/Node.html#method_all"><code>all</code></a> method to
+retrieve Node instances for each submenu, and the
+<a href="{{apiDocs}}/classes/Node.html#method_append"><code>append</code></a> and
+<a href="{{apiDocs}}/classes/Node.html#method_prepend"><code>prepend</code></a>
+methods to add the rounded corners <code>&#60;div&#62;</code>s to the bounding box of each submenu.
+</p>
+
+```
+//  Call the "use" method, passing in "node-menunav".  This will load the
+//  script and CSS for the MenuNav Node Plugin and all of the required
+//  dependencies.
+
+YUI().use('node-menunav', function(Y) {
+
+    //  Retrieve the Node instance representing the root menu
+    //  (<div id="productsandservices">)
+
+    var menu = Y.one("#productsandservices");
+
+
+    //  Use the "all" method to retrieve the
+    //  Node instances representing each submenu.
+
+    menu.all(".yui3-menu").each(function (node) {
+
+        //  Add decorator elements used to create the rounded corners to the
+        //  bounding box of each submenu.
+
+        // Insert the first decorator before the submenu's content box
+        node.prepend('<div class="yui3-menu-corner yui3-menu-corner-tl"><div class="yui3-menu-corner-tr"></div></div>');
+
+        // Insert the second decorator after the submenu's content box
+        node.append('<div class="yui3-menu-corner yui3-menu-corner-bl"><div class="yui3-menu-corner-br"></div></div>');
+
+    });
+
+
+    //  Call the "plug" method of the Node instance, passing in a reference to the
+    //  MenuNav Node Plugin.
+
+    menu.plug(Y.Plugin.NodeMenuNav);
+
+    //  Show the menu now that it is ready
+
+    menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+});
+```
+<em>Note:</em> In keeping with the
+<a href="http://developer.yahoo.com/performance/">Exceptional Performance</a>
+team's recommendation, the script block used to instantiate the menu will be
+<a href="http://developer.yahoo.com/performance/rules.html#js_bottom">placed at the bottom of the page</a>.
+This not only improves performance, it helps ensure that the DOM subtree of the
+element representing the root menu
+(<code>&#60;div id="productsandservices"&#62;</code>) is ready to be scripted.
+</p>
+
+<h2>Create the Rounded Corner Background Image</h2>
+<p>
+For performance, each rounded corner <code>&#60;div&#62;</code> uses the same image as its
+background image, but only reveals the relevant section of the image via the
+<code>background-position</code> property.  The complete image is as follows:
+</p>
+
+<img src="{{componentAssets}}/round.png" width="200" height="6" alt="Image used as the background image for the DIV elements used to create rounded corners">
+
+<h2>Styling the Rounded Corner HTML</h2>
+<p>
+With the rounded corner elements appended to each submenu, the next step is to define
+the styles that create the rounded corner effect.  Start by overriding the values for
+<code>border</code> and <code>padding</code> specified for the content box of each submenu in the
+Sam skin CSS.  The top and bottom borders are set to 0, since both borders will be drawn by the
+background image used to create the rounded corners.  The top and bottom padding will be created by
+setting the height of each <code>&#60;div&#62;</code> inside the
+<code>&#60;div class="yui3-menu-corner"&#62;</code>.
+</p>
+
+```
+/*
+    Overide the values for border and padding specified for the content box of each submenu in
+    the Sam skin CSS.  The top and bottom borders are set to 0, since both borders will be drawn
+    by the background image used to create the rounded corners.  The top and bottom padding
+    will be created by setting the height of each <div> inside the
+    <div class="yui3-menu-corner">.
+*/
+
+#productsandservices .yui3-menu .yui3-menu-content {
+
+    border-top: 0;
+    border-bottom: 0;
+    padding: 0;
+
+}
+```
+
+<p>
+Next, define the styles for each corner element.  The <code>&#60;div&#62;</code>s for the top-left
+and bottom-left corners define a right margin that will provide space for the their inner
+<code>&#60;div&#62;</code>s to fill using a negative right margin.  Each inner
+<code>&#60;div&#62;</code> will define a left margin to reveal the background image applied to
+its parent <code>&#60;div&#62;</code>.
+</p>
+```
+.yui3-menu-corner {
+
+    margin-right: 4px;  /*  Reserve space for the top-right and bottom-right corners. */
+
+    /* The background image (sprite) for the top-left and bottom-left corners. */
+    background: url({{componentAssets}}/round.png) no-repeat;
+
+}
+
+.yui3-menu-corner div {
+
+    height: 4px;
+
+    margin: 0 -4px 0 4px;   /*  Use a negative right margin to move the <div> into
+                                the right margin of the parent element
+                                (<div class="yui3-menu-corner">) to draw the top-right
+                                and bottom-right corners.
+
+                                Apply a left margin to reveal the background image
+                                applied to the parent element for the top-left and
+                                bottom-left corners. */
+
+    /* The background image (sprite) for the top-right and bottom-right corners. */
+    background: url({{componentAssets}}/round.png) no-repeat;
+
+    _position: relative;    /*  Necessary to get negative margins working in IE 6
+                                (Standards Mode and Quirks Mode and IE 7 (Quirks
+                                Mode only). */
+
+    _font-size: 0;  /*  Necessary to collapse the height of the <div> in IE 6
+                        (Standards Mode and Quirks Mode and IE 7 (Quirks Mode only) so
+                        that it renders at 4px tall.  */
+
+}
+```
+
+<p>
+The last step is to simply set <code>background-position</code> property for the bottom-left,
+top-right, and bottom-right corner elements to reveal the corresponding section of the corner
+background image.
+</p>
+```
+/*
+    Set the "background-position" property for the bottom-left, top-right, and
+    bottom-right corner elements to reveal the corresponding section of the corner
+    background image.
+*/
+
+.yui3-menu-corner-bl {
+
+    background-position: left bottom;
+
+}
+
+.yui3-menu-corner .yui3-menu-corner-tr {
+
+    background-position: top right;
+
+}
+
+.yui3-menu-corner .yui3-menu-corner-br {
+
+    background-position: right bottom;
+
+}
+```
diff --git a/src/node-menunav/docs/node-menunav-7-example.mustache b/src/node-menunav/docs/node-menunav-7-example.mustache
new file mode 100644
index 00000000000..9f19d60d6f5
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-7-example.mustache
@@ -0,0 +1,202 @@
+<h1>Header</h1>
+
+<div class="yui3-g" id="bd">
+<div class="yui3-u" id="side">
+    <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+</div>
+
+<div class="yui3-u" id="main">
+   <div id="productsandservices" class="yui3-menu yui3-menu-horizontal yui3-splitbuttonnav">
+        <div class="yui3-menu-content">
+            <ul class="first-of-type">
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://answers.yahoo.com">Answers</a>
+                        <a href="#answers-options" class="yui3-menu-toggle">Answers Options</a>
+                    </span>
+
+                    <div id="answers-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/">Answer</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answersonthestreet.yahoo.com/">Answers on the Street</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/question/;_ylt=Av3Nt22Mr7YNs651NWFv8YUPzKIX;_ylv=3?link=ask">Ask</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://answers.yahoo.com/dir/;_ylt=Aqp_jJlsYDP7urcq2WGC6HBJxQt.;_ylv=3?link=over&amp;amp;more=y">Discover</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://www.flickr.com">Flickr</a>
+                        <a href="#flickr-options" class="yui3-menu-toggle">Flickr Options</a>
+                    </span>
+
+                    <div id="flickr-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/explore/">Explore</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/groups/">Groups</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/photos/organize/">Organize Your Photos</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://flickr.com/photos/friends/">Photos From Contacts</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/signup/">Sign Up</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://www.flickr.com/tour/">Take a Tour</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://mobile.yahoo.com">Mobile</a>
+                        <a href="#mobile-options" class="yui3-menu-toggle">Mobile Options</a>
+                    </span>
+
+                    <div id="mobile-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/developers">Developers Home</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/mail">Mail</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/gallery">Widget Gallery</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/oneconnect">Y! oneConnect</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/go">Yahoo! Go</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/iphone">Yahoo! on the iPhone</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://mobile.yahoo.com/mail">More Mobile Services</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://upcoming.yahoo.com/">Upcoming</a>
+                        <a href="#upcoming-options" class="yui3-menu-toggle">Upcoming Options</a>
+                    </span>
+
+                    <div id="upcoming-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/event/add/">Add New Event</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/event/">Events</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/friend/">Friends</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/group/">Groups</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/place/">Places</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://upcoming.yahoo.com/popular/">Popular</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+                <li>
+
+                    <span class="yui3-menu-label">
+                        <a href="http://forgood.yahoo.com/index.html">Yahoo! for Good</a>
+                        <a href="#for-good-options" class="yui3-menu-toggle">Yahoo! for Good Options</a>
+                    </span>
+
+                    <div id="for-good-options" class="yui3-menu">
+                        <div class="yui3-menu-content">
+                            <ul>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/donate.html">Donate</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/everyday_heroes/index.html">Everyday Heroes</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/go_green/index.html">Go Green</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/good_causes/index.html">Good Causes</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/purple_acts/index.html">Purple Acts</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/social_responsibility/index.html">Social Responsibility</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/index.html">Take Action</a></li>
+                                <li class="yui3-menuitem"><a class="yui3-menuitem-content" href="http://forgood.yahoo.com/take_action/volunteer.html">Volunteer</a></li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </li>
+
+            </ul>
+        </div>
+    </div>
+
+    <p class="first-of-type">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+    <form>
+
+        <div>
+            <label for="field-1">Field One</label>
+            <input type="text" id="field-1" name="field-1">
+        </div>
+
+        <div>
+            <label for="field-2">Field Two</label>
+            <input type="text" id="field-2" name="field-2">
+        </div>
+
+        <div>
+            <label for="field-3">Field Three</label>
+            <select id="field-3" name="field-3">
+                <option value="1">Field Three - Option One</option>
+                <option value="2">Field Three - Option Two</option>
+                <option value="3">Field Three - Option Two</option>
+            </select>
+        </div>
+
+    </form>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+</div>
+</div>
+
+<div id="footer">
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
+</div>
+
+<script type="text/javascript">
+
+    //  Call the "use" method, passing in "node-menunav".  This will load the
+    //  script and CSS for the MenuNav Node Plugin and all of the required
+    //  dependencies.
+
+    YUI({
+        modules: {
+            "node-menunav-core-css": {
+                type: "css",
+                path: "node-menunav/assets/node-menunav-core.css"
+            },
+            "custommenunavskin": {
+                type: "css",
+                fullpath: "{{componentAssets}}/example7.css",
+                supersedes: ['skin-sam-node-menunav']
+            }
+        }
+
+    }).use('node-menunav', "node-menunav-core-css", "custommenunavskin", function(Y, result) {
+
+        //  Retrieve the Node instance representing the root menu
+        //  (<div id="productsandservices">) and call the "plug" method
+        //  passing in a reference to the MenuNav Node Plugin.
+
+        var menu = Y.one("#productsandservices");
+
+        menu.plug(Y.Plugin.NodeMenuNav, { autoSubmenuDisplay: false, mouseOutHideDelay: 0 });
+
+        //  Show the menu now that it is ready
+
+        menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
+
+    });
+
+</script>
diff --git a/src/node-menunav/docs/node-menunav-7.mustache b/src/node-menunav/docs/node-menunav-7.mustache
new file mode 100644
index 00000000000..7e89a3ba109
--- /dev/null
+++ b/src/node-menunav/docs/node-menunav-7.mustache
@@ -0,0 +1,34 @@
+<div class="intro">
+    <p>
+    This example demonstrates how to skin a menu built using the MenuNav Node Plugin to look like the
+    menus on <a href="http://www.flickr.com">Flickr</a>
+    </p>
+</div>
+
+<div class="example newwindow">
+    <a href="node-menunav-7-example.html" target="_blank" class="button">
+        View Example in New Window
+    </a>
+</div>
+
+<h2>Creating A Custom Skin</h2>
+<p>
+Skinning the menus created using the MenuNav Node Plugin is done using CSS.  The stylesheet used
+for other MenuNav Node Plugin examples is a minified version of the node-menunav-core.css and
+node-menunav-skin.css files.  The node-menunav-core.css file includes foundational styling that
+controls basic layout and positioning, whereas the node-menunav-skin.css file is used to apply
+colors, borders, padding, etc.
+</p>
+
+<p>
+Skinning can be accomplished by either overriding the styles defined in the node-menunav-skin.css
+file, or by creating an entirely new skin file.  In either case, place custom styles in a separate
+file to simplify integrating with YUI updates.
+</p>
+
+<p>
+When creating a custom skin, use the node-menunav-core.css and node-menunav-skin.css files as a
+reference.  Also consult the <a href="index.html#css-reference">CSS reference</a>
+section of the MenuNav Node Plugin landing page, as it provides a complete list of all of the class
+names used by the MenuNav Node Plugin along with when and to what element(s) they are applied.
+</p>