title: Pure-CSS / YUI Vertical multi-level menu
body: <p>I am trying to use the Pure CSS framework for a responsive layout. 
  I like their vertical menu, but I can't figure out how to add dropdown (collapsing) submenus. </p>
  
  <p>I can't even get the horizontal menu example on their site to work here:
  <a href="http://purecss.io/menus/#add-dropdowns-to-menus" rel="nofollow">http://purecss.io/menus/#add-dropdowns-to-menus</a></p>
  
  <p>Vertical menu was the main reason I adopted Pure for my project, now I'm stuck.</p>
  
  <p><em>Per Matthew's request here is code for an html page. Includes all code and links so you can load it in a browser for quickest understanding...</em></p>
  
  <pre><code>&lt;!doctype html&gt;  
  &lt;html lang="en"&gt;  
  &lt;head&gt;  
  
  &lt;!-- This page uses PURE CSS. See documentation at http://purecss.io/ --&gt;
  &lt;meta charset="utf-8"&gt;  
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  
  
  &lt;!-- For HTML5, place favicon.ico and apple-touch-icon(s) in the root directory --&gt;
  
  &lt;!--Add PURE Base, which essentially is built-in Normalize.css, 
      an HTML5-ready CSS reset with minimal styling. --&gt;
  &lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"&gt;
  
  &lt;!--Add style for vertical menu. --&gt; 
      &lt;!--[if lte IE 8]&gt;
          &lt;link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu-old-ie.css"&gt;
      &lt;![endif]--&gt;
      &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
          &lt;link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu.css"&gt;
      &lt;!--&lt;![endif]--&gt;
  
  &lt;!--Add yui for second-level menu support. --&gt;
  &lt;script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"&gt;&lt;/script&gt;    
  
  
  &lt;/head&gt;  
  &lt;body&gt;  
  
  &lt;div id="layout"&gt;
      &lt;!-- Menu toggle --&gt;
      &lt;a href="#menu" id="menuLink" class="menu-link"&gt;
          &lt;!-- Hamburger icon --&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;div id="menu"&gt;
          &lt;div class="pure-menu pure-menu-open"&gt;
              &lt;a class="pure-menu-heading" href="#"&gt;Company&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="menu-item-divided pure-menu-selected"&gt;
                      &lt;a href="#"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="main"&gt;
          &lt;div class="header"&gt;
              &lt;h1&gt;Page Title&lt;/h1&gt;
              &lt;h2&gt;A subtitle for your page goes here&lt;/h2&gt;
          &lt;/div&gt;
  
          &lt;div class="content"&gt;
              &lt;h2 class="content-subhead"&gt;The Layout&lt;/h2&gt;
              &lt;p&gt;
                  This is the basic "Side Bar" page design I want to customize. I got it from the Pure CSS &lt;a href="http://purecss.io/layouts/" target="_blank"&gt;Layouts page&lt;/a&gt;.
              &lt;/p&gt;
  
  
              &lt;h2 class="content-subhead"&gt;Horizontal Menu Example&lt;/h2&gt;
  &lt;p&gt;Following is the example &lt;a href="http://purecss.io/menus/#add-dropdowns-to-menus" target="_blank"&gt;from Pure CSS Menus page&lt;/a&gt; for adding drop-down to horizontal menu:&lt;/p&gt;
  
  &lt;div id="demo-horizontal-menu"&gt;
      &lt;ul id="std-menu-items"&gt;
          &lt;li class="pure-menu-selected"&gt;&lt;a href="#"&gt;Flickr&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Messenger&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Finance&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Other&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li class="pure-menu-heading"&gt;More from Yahoo!&lt;/li&gt;
                  &lt;li class="pure-menu-separator"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Autos&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Flickr&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Answers&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Even More&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Horoscopes&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Games&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Jobs&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;OMG&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;!-- Script for adding drop-down. --&gt;
  &lt;script&gt;
  YUI({
      classNamePrefix: 'pure'
  }).use('gallery-sm-menu', function (Y) {
  
      var horizontalMenu = new Y.Menu({
          container         : '#demo-horizontal-menu',
          sourceNode        : '#std-menu-items',
          orientation       : 'horizontal',
          hideOnOutsideClick: false,
          hideOnClick       : false
      });
  
      horizontalMenu.render();
      horizontalMenu.show();
  
  });
  &lt;/script&gt;
  
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p style="color:garnet; font-weight:bold;"&gt;I am trying to learn how to add the above submenu functionality to Pure's vertical menu, which displays on the left side of this page.&lt;/p&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;!-- Script to make vertical menu responsive. --&gt;
  &lt;script src="http://purecss.io/combo/1.11.5?/js/ui.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>