Refine documentation for drilldown menu

diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 0264675480c1ac3f517a95c26818e9b12ebee54d..0b23fc3cde081368d514459458b5f81d3df5b2b0 100644 (file)
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -7,8 +7,24 @@ js: js/foundation.drilldown.js
 
 ## Basics
 
-Drilldowns use the standard [Menu](menu.html#nested-style) syntax. Add the attribute `data-drilldown` to the root `<ul>`, and `.menu` to each nested menu.
+Drilldowns use the standard [Menu](menu.html#nested-style) syntax, using `<ul>`, `<li>`, and `<a>`. Add `data-drilldown` to the root menu to set up the drilldown.
 
+To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will then open the `<ul>` it's next to.
+
+Any `<a>` without a submenu will function like a normal link.
+
+```html
+<ul class="vertical menu" data-drilldown>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="vertical menu">
+      <li><a href="#">Item 1A</a></li>
+      <!-- ... -->
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+</ul>
+```
 
 <ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
   <li>
@@ -52,3 +68,15 @@ Drilldowns use the standard [Menu](menu.html#nested-style) syntax. Add the attri
   </li>
   <li><a href="#"> Item 4</a></li>
 </ul>
+
+---
+
+## Custom Styling
+
+The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the `.js-drilldown-back` class:
+
+```css
+.js-drilldown-back {
+  // ...
+}
+```