diff --git a/src/menus/css/menus-core.css b/src/menus/css/menus-core.css
index 771c5a3..0e6cd86 100644
--- a/src/menus/css/menus-core.css
+++ b/src/menus/css/menus-core.css
@@ -1,22 +1,24 @@
 /*csslint adjoining-classes: false, box-model:false*/
-.pure-menu ul, .pure-menu li {
+.pure-menu-list,
+.pure-menu-item {
     position: relative;
 }
-.pure-menu ul {
+.pure-menu-list {
     list-style: none;
     margin: 0;
     padding: 0;
+    display: inline-block;
 }
-.pure-menu li {
+.pure-menu-item {
     padding: 0;
     margin: 0;
     height: 100%;
+    text-align: left;
 }
-.pure-menu a,
-.pure-menu .pure-menu-heading {
+.pure-menu-link,
+.pure-menu-heading,
+.pure-menu-responsive-toggle {
     display: block;
-    line-height: 1.5em;
-    padding: 5px 20px;
     text-decoration: none;
     white-space: nowrap;
 }
@@ -28,18 +30,7 @@
     margin: 0;
     vertical-align: middle;
 }
-.pure-menu-horizontal > ul {
-    display: inline-block;
-    *display: inline;
-    zoom: 1;
-    vertical-align: middle;
-}
 
-.pure-menu li a { padding: 5px 20px; }
-
-.pure-menu-can-have-children > .pure-menu-label {
-    padding-right: 30px;
-}
 
 /* FIXED MENU */
 .pure-menu-fixed {
@@ -58,7 +49,8 @@
 }
 
 /* Initial menus should be inline-block so that they are horizontal */
-.pure-menu-horizontal li {
+.pure-menu-horizontal .pure-menu-item,
+.pure-menu-horizontal .pure-menu-heading {
     display: inline-block;
     *display: inline;
     zoom: 1;
@@ -66,54 +58,34 @@
 }
 
 /* Submenus should still be display: block; */
-.pure-menu-horizontal li li {
+.pure-menu-item .pure-menu-item {
     display: block;
 }
 
-/* Adjusting separator for vertical menus */
-.pure-menu-horizontal .pure-menu-separator {
-    height: 50%;
-    width: 1px;
-    margin: 0 7px;
-}
-
-/* Submenus should be horizontal separator again */
-.pure-menu-horizontal li .pure-menu-separator {
-    height: 1px;
-    width: auto;
-    margin: 7px 2px;
-}
-
 /* RESPONSIVE MENUS */
 /* Hide the toggle button by default. It will show on small screen sizes */
-.pure-menu-responsive .pure-menu-toggle {
-    float: right;
-    text-transform: uppercase;
-    font-size: 80%;
+.pure-menu-responsive .pure-menu-list {
     display: none;
 }
 
-/* If the menu is open, and the viewport is larger than 767px, we
-   still want the toggle button to show.
-*/
-.pure-menu-responsive.pure-menu-active .pure-menu-toggle {
+.pure-menu-responsive-toggle {
     display: block;
 }
 
-.pure-menu-responsive .pure-menu-toggle:after {
+.pure-menu-responsive-toggle:after {
     content: "\25BE";
     float: right;
-    /* These specific fonts have the Unicode char we need. */
     font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
     margin-right: -15px;
     margin-top: -1px;
 }
 
-.pure-menu-responsive.pure-menu-active ul, .pure-menu-responsive.pure-menu-active li {
+.pure-menu-is-active .pure-menu-list,
+.pure-menu-is-active .pure-menu-item {
     display: block;
 }
 
-.pure-menu-responsive.pure-menu-active .pure-menu-separator {
+.pure-menu-is-active .pure-menu-separator {
     width: auto;
     height: 1px;
 }
diff --git a/src/menus/css/menus-dropdown.css b/src/menus/css/menus-dropdown.css
new file mode 100644
index 0000000..3642d56
--- /dev/null
+++ b/src/menus/css/menus-dropdown.css
@@ -0,0 +1,40 @@
+/* By default, don't show the .pure-menu-children. */
+.pure-menu-children {
+    display: none;
+    position: absolute; /* absolute positioned inside a relative container */
+    margin: 0;
+    padding: 0;
+}
+
+/* Vertical Menus - when an item is interacted with, show the children */
+.pure-menu-item:hover > .pure-menu-children,
+.pure-menu-item:focus > .pure-menu-children {
+    display: block;
+    top: 0;
+    left: 100%;
+    width: 100%;
+}
+
+/* Horizontal Menus - when an item is interacted with, show the children */
+.pure-menu-horizontal .pure-menu-item:hover > .pure-menu-children,
+.pure-menu-horizontal .pure-menu-item:focus > .pure-menu-children {
+    top: 100%;
+    left: 0;
+    width: inherit;
+}
+
+.pure-menu-is-active .pure-menu-children {
+    display: block;
+    position: static;
+}
+
+/* Regular Menus - show the dropdown arrow */
+.pure-menu-has-children > .pure-menu-link:after {
+    padding-left: 0.5em;
+    content: "\25B8";
+}
+
+/* Horizontal Menus - show the dropdown arrow */
+.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
+    content: "\25BE";
+}
diff --git a/src/menus/css/menus-paginator.css b/src/menus/css/menus-paginator.css
deleted file mode 100644
index bf248dc..0000000
--- a/src/menus/css/menus-paginator.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/*csslint box-model:false*/
-/*TODO: Remove this lint rule override after a refactor of this code.*/
-
-
-.pure-paginator {
-
-    /* `pure-g` Grid styles */
-    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    *letter-spacing: normal; /* reset IE < 8 */
-    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
-    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
-
-    /* `pure-paginator` Specific styles */
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-.opera-only :-o-prefocus,
-.pure-paginator {
-    word-spacing: -0.43em;
-}
-
-/* `pure-u` Grid styles */
-.pure-paginator li {
-    display: inline-block;
-    *display: inline; /* IE < 8: fake inline-block */
-    zoom: 1;
-    letter-spacing: normal;
-    word-spacing: normal;
-    vertical-align: top;
-    text-rendering: auto;
-}
-
-
-.pure-paginator .pure-button {
-    border-radius: 0;
-    padding: 0.8em 1.4em;
-    vertical-align: top;
-    height: 1.1em;
-}
-.pure-paginator .pure-button:focus,
-.pure-paginator .pure-button:active {
-    outline-style: none;
-}
-.pure-paginator .prev,
-.pure-paginator .next {
-    color: #C0C1C3;
-    text-shadow: 0 -1px 0 rgba(0,0,0, 0.45);
-}
-.pure-paginator .prev {
-    border-radius: 2px 0 0 2px;
-}
-.pure-paginator .next {
-    border-radius: 0 2px 2px 0;
-}
diff --git a/src/menus/css/menus-r.css b/src/menus/css/menus-r.css
index 31e8e86..d8afe7b 100644
--- a/src/menus/css/menus-r.css
+++ b/src/menus/css/menus-r.css
@@ -1,16 +1,8 @@
-/*adjoining-classes: false*/
-@media (max-width: 767px) {
-    .pure-menu-responsive .pure-menu-toggle {
-        display: block;
+@media (min-width: 48em) {
+    .pure-menu-responsive .pure-menu-list {
+        display: inline-block;
     }
-    .pure-menu-responsive ul {
+    .pure-menu-responsive-toggle {
         display: none;
     }
-    .pure-menu-responsive.pure-menu.active ul {
-        display: inline-block;
-        *display: inline;
-        zoom: 1;
-        vertical-align: middle;
-    }
-
-}
+}
\ No newline at end of file
diff --git a/src/menus/css/menus.css b/src/menus/css/menus.css
index b3931fd..587beca 100644
--- a/src/menus/css/menus.css
+++ b/src/menus/css/menus.css
@@ -1,55 +1,15 @@
-/*csslint adjoining-classes: false, duplicate-properties:false*/
-
-/* MENUS STYLING */
-/* Focus style for a dropdown menu-item when the parent has been opened */
-.pure-menu {
-    background: #fff; /* need this to make menus stand out from page background */
-    border: 1px solid #eee;
-}
-.pure-menu a {
-    color: #666;
-}
-/* Hover and focus styles */
-.pure-menu li a:hover,
-.pure-menu li a:focus {
-    background: #dedede;
-    *background: #dedede;
-    background: rgba(0,0,0,0.15);
-}
-
-/* DISABLED STATES */
-/* need the .pure-menu prefix so that people over-riding `a` don't over-ride pure-menu-disabled too */
-.pure-menu .pure-menu-disabled a,
-.pure-menu .pure-menu-disabled a:hover,
-.pure-menu .pure-menu-disabled a:focus {
-    color: #bababa;
-    *color: #bababa;
-    color: rgba(0,0,0, 0.5);
-    background: transparent;
-}
-
-
 .pure-menu-heading {
-    color: #565d64;
-    text-transform: uppercase;
-    font-size: 90%;
-    margin-top: 0.5em;
-    border-bottom: 1px solid #eee;
+    font-weight: bold;
 }
 
-.pure-menu-horizontal .pure-menu-heading {
-    border-bottom: none;
+.pure-menu-responsive-toggle {
+    float: right;
 }
 
-/* ACTIVE MENU ITEM */
-.pure-menu .pure-menu-selected a {
-    color: #000;
+.pure-menu-link {
+    padding: 0.3em 0.5em;
 }
 
-/* FIXED MENU */
-.pure-menu-fixed {
-    border: none;
-    border-bottom: 1px solid #b7b7b7;
-    *border-bottom: 1px solid #b7b7b7;
-    border-bottom: 1px solid rgba(0,0,0,0.4);
-}
+.pure-menu-is-active .pure-menu-children {
+    padding-left: 0.5em;
+}
\ No newline at end of file
diff --git a/src/menus/tests/manual/menus.html b/src/menus/tests/manual/menus.html
index 941852a..dbe57f6 100644
--- a/src/menus/tests/manual/menus.html
+++ b/src/menus/tests/manual/menus.html
@@ -7,216 +7,115 @@
     <link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
     <link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
     <link rel="stylesheet" type="text/css" href="../../../../build/menus-min.css">
-
+    <script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
     <style>
+        h1 {
+            font-size: 15px;
+            font-weight: normal;
+        }
         body {
-            font-family: sans-serif;
-            color: #333;
-            margin-bottom: 30px;
+            padding: 2em;
         }
-
-        .content {
-            padding:0 30px;
-        }
-
-        .content h2 {
-            color:#2B474F;
-            margin:50px 0 20px 0;
-            font-weight:bold;
-        }
-
-        #menu-1 {
-            width:120px;
-        }
-
-        #vertical-menu1, #vertical-menu2, #vertical-menu3 {
-            width:40%;
-        }
-
-        #vertical-menu3 {
-            margin: 10px;
-        }
-
-        .pure-menu {
-            margin-bottom:15px;
-        }
-
-        .pure-menu-custom {
-            background: red;
-            border:1px solid black;
-        }
-
-        .pure-menu-custom a {
-            color: white;
-        }
-
-        .pure-menu-custom a:hover {
-            color: orange;
-        }
-        .pure-menu-custom .pure-menu-disabled a,
-        .pure-menu-custom .pure-menu-disabled a:hover
-         {
-            color: yellow;
-        }
-
-        .pure-menu-custom .pure-menu-heading {
-            color: blue;
-        }
-
-        .pure-menu-custom .pure-menu-selected {
-            font-weight: bold;
-        }
-
     </style>
 </head>
-<body class="pure-skin-sam">
-
-    <div class="header y-u-1">
-
-        <h1 class="pure-u-1">Pure Menus CSS</h1>
-        <h2 class="pure-u">Simple styling for HTML List elements as menus.</h2>
-
-    </div>
-
-    <div class="content">
-
-        <h2>Horizontal Menu</h2>
-
-        <p>
-            You can mark the active menu element by adding the <code>.pure-menu-selected</code> class to the list item.
-        </p>
-
-        <div class="pure-menu pure-menu-horizontal">
-            <a href="#" class="pure-menu-heading">Site Title</a>
-            <ul>
-                <li><a href="#">Home</a></li>
-                <li class="pure-menu-selected"><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-                <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
-            </ul>
-        </div>
-
-        <h2>Vertical Menu</h2>
-
-        <div id="vertical-menu1" class="pure-menu">
-            <a href="#" class="pure-menu-heading">Site Title</a>
-            <ul>
-                <li class="pure-menu-selected"><a href="#">Home</a></li>
-                <li><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li class="pure-menu-heading">Yahoo! Sites</li>
-                <li><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-                <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
-            </ul>
-        </div>
-
-        <div id="vertical-menu1" class="pure-menu">
-            <ul>
-                <li class="pure-menu-heading">Site Title</li>
-                <li class="pure-menu-selected"><a href="#">Home</a></li>
-                <li><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li class="pure-menu-heading">Yahoo! Sites</li>
-                <li><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-                <li class="pure-menu-disabled"><a href="#">Disabled</a></li>
-            </ul>
-        </div>
-
-
-        <h2>Fixed Menus</h2>
-
-        <p>
-            Fixed menus can be created by adding the <code>pure-menu-fixed</code> class name to the wrapper. This will fix a menu to the top of the page.
-        </p>
-
-        <p>
-            <button class="pure-button" id="showFixedMenuBtn">Toggle Fixed Menu</button>
-        </p>
-
-        <div id="fixed-menu" class="pure-menu pure-menu-horizontal pure-menu-fixed">
-            <ul>
-                <li class="pure-menu-selected"><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-            </ul>
-        </div>
-
-        <h2>Responsive Menu</h2>
-
-        <div class="pure-menu pure-menu-horizontal pure-menu-2 pure-menu-responsive">
-            <a href="#" class="pure-menu-heading">Site Title</a>
-            <a href="#" class="pure-menu-toggle">Open</a>
-            <ul>
-                <li class="pure-menu-selected"><a href="#">Home</a></li>
-                <li><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li class="pure-menu-separator">&nbsp;</li>
-                <li class="pure-menu-disabled"><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-            </ul>
-        </div>
-
-        <h2>Customizing Menu</h2>
-
-
-        <div class="pure-menu pure-menu-horizontal pure-menu-custom pure-menu-responsive">
-            <a href="#" class="pure-menu-heading">Site Title</a>
-            <a href="#" class="pure-menu-toggle">Open</a>
-            <ul>
-                <li class="pure-menu-selected"><a href="#">Home</a></li>
-                <li><a href="#">Flickr</a></li>
-                <li><a href="#">Messenger</a></li>
-                <li class="pure-menu-separator">&nbsp;</li>
-                <li class="pure-menu-disabled"><a href="#">Sports</a></li>
-                <li><a href="#">Finance</a></li>
-            </ul>
-        </div>
-
-
-
-        <h2>Paginator</h2>
-
-        <ul class="pure-paginator">
-            <li><a class="pure-button prev" href="#">&#171;</a></li>
-            <li><a class="pure-button" href="#">1</a></li>
-            <li><a class="pure-button pure-button-active" href="#">2</a></li>
-            <li><a class="pure-button" href="#">3</a></li>
-            <li><a class="pure-button" href="#">4</a></li>
-            <li><a class="pure-button" href="#">5</a></li>
-            <li><a class="pure-button next" href="#">&#187;</a></li>
+<body>
+    
+    <h1>div.pure-menu.pure-menu-horizontal</h1>
+    <div class="pure-menu pure-menu-horizontal">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
         </ul>
-
     </div>
-    <script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
+
+
+    <h1>div.pure-menu</h1>
+    <div class="pure-menu">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+        </ul>
+    </div>
+
+    <h1>div.pure-menu, with nested children</h1>
+    <div class="pure-menu">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item pure-menu-can-have-children pure-menu-has-children">
+                <a href="#" class="pure-menu-link">Blog</a>
+                <ul class="pure-menu-children">
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
+                            <li class="pure-menu-item"><a class="pure-menu-link" href="/javascript">Intl Message Format</a></li>
+                </ul>
+            </li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+        </ul>
+    </div>
+
+    <h1>div.pure-menu.pure-menu-horizontal.pure-menu-responsive</h1>
+    <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+        </ul>
+    </div>
+
+
+    <h1>div.pure-menu.pure-menu-horizontal.pure-menu-responsive, with nested children</h1>
+    <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
+        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
+        <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item pure-menu-can-have-children pure-menu-has-children">
+                <a href="#" class="pure-menu-link">Blog</a>
+                <ul class="pure-menu-children">
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
+                    <li class="pure-menu-item"><a class="pure-menu-link" href="/javascript">Intl Message Format</a></li>
+                </ul>
+            </li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+        </ul>
+    </div>
+
     <script>
-    YUI({
-        classNamePrefix: 'pure'
-    }).use('node-base', function (Y) {
-        var toggle = Y.all(".pure-menu-toggle"),
-            i = 0,
-            ACTIVE = 'pure-menu-active';
 
-        for (; i < toggle.size(); i++) {
-
-            toggle.item(i).on('click', function (e) {
-                var parent = e.currentTarget.get('parentNode');
+        YUI().use('node', function (Y) {
+            var toggle = Y.one('.pure-menu-responsive-toggle');
 
+            Y.one('document').delegate('click', function (e) {
                 e.preventDefault();
-                parent.toggleClass(ACTIVE);
-                if (parent.hasClass(ACTIVE)) {
-                    e.currentTarget.set('text', 'Close');
-                }
-                else {
-                    e.currentTarget.set('text', 'Open')
-                }
-            });
-        }
-    });
+                e.target.get('parentNode').toggleClass('pure-menu-is-active');
+            }, '.pure-menu-responsive-toggle');
+        });
     </script>
+
 </body>
 </html>