Docs: Maintain consistency within menu types

Update accordion and dropdown menu docs same like drilldown menu

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index ead2e3d23be4634a7e96c723f0df0fd3bdf5d590..ea51b7221f37cdb32eaee1422b8f8297b19f296d 100644 (file)
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -28,7 +28,7 @@ Any `<a>` will behave like a standard link. However, any `<a>` paired with a nes
 </div>
 
 ```html
-<ul class="vertical menu" data-accordion-menu>
+<ul class="vertical menu accordion-menu" data-accordion-menu>
   <li>
     <a href="#">Item 1</a>
     <ul class="menu vertical nested">
@@ -40,7 +40,7 @@ Any `<a>` will behave like a standard link. However, any `<a>` paired with a nes
 </ul>
 ```
 
-<ul class="vertical menu" data-accordion-menu style="max-width: 250px">
+<ul class="vertical menu accordion-menu" data-accordion-menu style="max-width: 250px">
   <li>
     <a href="#">Item 1</a>
     <ul class="menu vertical nested">
@@ -66,6 +66,7 @@ Any `<a>` will behave like a standard link. However, any `<a>` paired with a nes
   <li><a href="#">Item 3</a></li>
 </ul>
 
+<br>
 
 ## Submenu Toggle
 
@@ -76,10 +77,10 @@ You need to add the class `accordion-menu` as well as the data attribute `data-s
 <ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
   <li>
     <a href="http://foundation.zurb.com/">Zurb Foundation</a>
-    <ul class="menu vertical">
+    <ul class="menu vertical nested">
       <li>
         <a href="#">Item 1A</a>
-        <ul class="menu vertical">
+        <ul class="menu vertical nested">
           <li><a href="#">Item 1Ai</a></li>
           <li><a href="#">Item 1Aii</a></li>
           <li><a href="#">Item 1Aiii</a></li>
@@ -91,7 +92,7 @@ You need to add the class `accordion-menu` as well as the data attribute `data-s
   </li>
   <li>
     <a href="#">Item 2</a>
-    <ul class="menu vertical">
+    <ul class="menu vertical nested">
       <li><a href="#">Item 2A</a></li>
       <li><a href="#">Item 2B</a></li>
     </ul>
@@ -100,13 +101,13 @@ You need to add the class `accordion-menu` as well as the data attribute `data-s
 </ul>
 ```
 
-<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
+<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true" style="max-width: 250px">
   <li>
     <a href="http://foundation.zurb.com/">Zurb Foundation</a>
-    <ul class="menu vertical">
+    <ul class="menu vertical nested">
       <li>
         <a href="#">Item 1A</a>
-        <ul class="menu vertical">
+        <ul class="menu vertical nested">
           <li><a href="#">Item 1Ai</a></li>
           <li><a href="#">Item 1Aii</a></li>
           <li><a href="#">Item 1Aiii</a></li>
@@ -118,7 +119,7 @@ You need to add the class `accordion-menu` as well as the data attribute `data-s
   </li>
   <li>
     <a href="#">Item 2</a>
-    <ul class="menu vertical">
+    <ul class="menu vertical nested">
       <li><a href="#">Item 2A</a></li>
       <li><a href="#">Item 2B</a></li>
     </ul>

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 7ad1ce99f71c4429d19235d08d31467b59cc77e6..0c055bccde9d922c5e36fe6afb1668bebb951387 100644 (file)
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -95,14 +95,22 @@ Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus a
   <p>Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a <code>max-width</code> on the menu.</p>
 </div>
 
-
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/LyrYaE?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
 ```html
 <ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
-  <li><a href="#">Item 1</a></li>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="vertical menu nested">
+      <li><a href="#">Item 1A</a></li>
+      <!-- ... -->
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+  <li><a href="#">Item 3</a></li>
+  <li><a href="#">Item 4</a></li>
   <!-- ... -->
 </ul>
 ```
@@ -110,23 +118,23 @@ Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus a
 <ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
   <li>
     <a href="#Item-1">Item 1</a>
-    <ul class="menu">
+    <ul class="vertical menu nested">
       <li><a href="#Item-1A">Item 1A</a></li>
       <li>
         <a href="#Item-1B">Item 1B</a>
-        <ul class="menu">
+        <ul class="vertical menu nested">
           <li><a href="#Item-1Bi">Item 1B i</a></li>
           <li><a href="#Item-1Bii">Item 1B ii</a></li>
           <li>
             <a href="#Item-1Biii">Item 1B iii</a>
-            <ul class="menu">
+            <ul class="vertical menu nested">
               <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
               <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
             </ul>
           </li>
           <li>
             <a href="#Item-1Biv">Item 1B iv</a>
-            <ul class="menu">
+            <ul class="vertical menu nested">
               <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
             </ul>
           </li>
@@ -137,7 +145,7 @@ Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus a
   </li>
   <li>
     <a href="#Item-2">Item 2</a>
-    <ul class="menu">
+    <ul class="vertical menu nested">
       <li><a href="#Item-2A">Item 2A</a></li>
       <li><a href="#Item-2B">Item 2B</a></li>
     </ul>