diff --git a/.gitignore b/.gitignore
index 194af7a..8a47fe9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@
 ._*
 .Spotlight-V100
 .Trashes
-Icon?
 ehthumbs.db
 Thumbs.db
 node_modules
diff --git a/.jshintrc b/.jshintrc
index cef76e2..6f3c896 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,7 +1,7 @@
 {
   "bitwise" : true,
   "camelcase" : true,
-  "curly" : true,
+  "curly" : false,
   "eqeqeq" : true,
   "forin" : false,
   "immed" : true,
@@ -26,10 +26,14 @@
     "addEvent" : true,
     "removeEvent" : true,
     "addClass" : true,
+    "hasClass" : true,
     "removeClass" : true,
     "setAttributes" : true,
     "getChildren" : true,
+    "elemsByClassName" : true,
     "forEach" : true,
+    "next" : true,
+    "closest" : true,
     "options" : true,
     "opts" : true,
     "nav" : true
diff --git a/README.md b/README.md
index 884a60a..498878c 100644
--- a/README.md
+++ b/README.md
@@ -3,16 +3,17 @@
 
 ### Responsive navigation plugin without library dependencies and with fast touch screen support.
 
-[Responsive Nav](http://responsive-nav.com) is a tiny JavaScript plugin which weighs only ~1kb minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from `height: 0` to `height: auto`, which isn’t normally possible with CSS3 transitions.
+[Responsive Nav](http://responsive-nav.com) is a tiny JavaScript plugin which weighs only 1.5kb minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from `height: 0` to `height: auto`, which isn’t normally possible with CSS3 transitions.
 
 
 #### Features:
 
 * Simple, semantic markup.
-* Weighs only ~1kb minified and Gzip’ed.
+* Weighs only 1.5kb minified and Gzip’ed.
 * Doesn’t require any external library.
 * Uses CSS3 transitions and touch events.
 * Supports RequireJS and multiple instances.
+* Supports nested sub-navigations up to 3 levels deep.
 * Removes the 300ms delay between a physical tap and the click event.
 * Makes it possible to use CSS3 transitions with height: auto.
 * Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
@@ -95,19 +96,24 @@ See the [example code here](https://github.com/viljamis/responsive-nav.js/blob/m
 `nav.resize();`
 
 
+# Changing the breakpoint
+
+Breakpoint is defined in the [responsive-nav.css](https://github.com/viljamis/responsive-nav.js/blob/master/responsive-nav.css) file. Responsive Nav checks on window resize and on orientation change if the navigation toggle has `display: none;` and based on that switches between mobile and desktop states.
+
+
 # Supporting old IEs
 
 Even though Responsive Nav works even on IE6, you should remember that IE8 and under do not support media queries and thus can’t change between "small screen" and "large screen" styles. If needed, you can add Media Query support for those browsers using [respond.js](https://github.com/scottjehl/Respond). There’s an example [here](https://github.com/viljamis/responsive-nav.js/tree/master/demos/ie-support-using-respondjs).
 
-When old IE support is needed you should stick to using only ID selectors with Responsive Nav. That’s because the plugin uses `getElementById` method by default which is widely supported in all browsers. When using classes or element selectors `querySelector` will be used instead which isn’t supported in old IEs.
-
-`closeOnNavClick` option is the only thing that doesn’t work in IE8 & under, but the functionality is built using progressive enhancement, so nothing will break if you want to enable it for other browsers.
+When old IE support is needed you should stick to using ID selector with Responsive Nav. That’s because the plugin uses `getElementById` method by default which is widely supported in all browsers. When using classes or element selectors `querySelector` will be used instead which isn’t supported in old IEs.
 
 
 # Things to keep in mind
 
 Calculated Max-height doesn't account for top/bottom padding on `.nav-collapse` (this is on purpose). If you need to add padding inside the nav, you can apply it to any other element, for example the `<ul>` inside `.nav-collapse`.
 
+Currently, you can't use "closeOnNavClick" option and sub-navigations at the same time (this is on purpose too, as it wouldn't make much sense anyway).
+
 
 
 # Tested on the following platforms
@@ -219,6 +225,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 # Changelog
 
 
+`1.0.40` (2014-03-XX) - Major update. Adds support for nested sub-navigations!!! Currently supports navigations up to 3 levels. Sub-navigation toggles use the same method as the main navigation toggle to get rid of the 300ms tap delay, so they feel FAST. "closeOnNavClick" now works on old IEs too, so no more features that only work in modern browsers. Fixes a bug which caused the navigation to sometimes not toggle. Sub-navigations are fully keyboard accessible too (using tab key and enter).
+
 `1.0.32` (2014-03-05) - Ditching the `[].forEach.call(NodeList)` hack to make the code more sensible and future-proof.
 
 `1.0.31` (2014-03-02) - Fixes Chrome Mobile rendering issue.
diff --git a/bower.json b/bower.json
index d602080..70da30e 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "responsive-nav",
-  "version": "1.0.32",
+  "version": "1.0.40",
   "main": [
     "responsive-nav.css",
     "responsive-nav.js"
diff --git a/client/dist/bower/bower.json b/client/dist/bower/bower.json
index d602080..70da30e 100644
--- a/client/dist/bower/bower.json
+++ b/client/dist/bower/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "responsive-nav",
-  "version": "1.0.32",
+  "version": "1.0.40",
   "main": [
     "responsive-nav.css",
     "responsive-nav.js"
diff --git a/client/dist/responsive-nav.js b/client/dist/responsive-nav.js
index 6336d3c..abe520a 100644
--- a/client/dist/responsive-nav.js
+++ b/client/dist/responsive-nav.js
@@ -1,4 +1,4 @@
-/*! responsive-nav.js 1.0.32
+/*! responsive-nav.js 1.0.40
  * https://github.com/viljamis/responsive-nav.js
  * http://responsive-nav.com
  *
@@ -7,18 +7,22 @@
  */
 
 (function (document, window, index) {
+  // Index is used to keep multiple navs on the same page namespaced
 
   "use strict";
 
   var responsiveNav = function (el, options) {
 
     var computed = !!window.getComputedStyle;
+    var elemsByClassName = !!document.getElementsByClassName;
     
-    // getComputedStyle polyfill
+    /**
+     * getComputedStyle polyfill for old browsers
+     */
     if (!computed) {
-      window.getComputedStyle = function(el) {
+      window.getComputedStyle = function (el) {
         this.el = el;
-        this.getPropertyValue = function(prop) {
+        this.getPropertyValue = function (prop) {
           var re = /(\-([a-z]){1})/g;
           if (prop === "float") {
             prop = "styleFloat";
@@ -33,9 +37,37 @@
         return this;
       };
     }
-    /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */
-    // fn arg can be an object or a function, thanks to handleEvent
-    // read more at: http://www.thecssninja.com/javascript/handleevent
+    
+    /**
+     * GetElementsByClassName polyfill for old browsers
+     */
+    if (!elemsByClassName) {
+      document.getElementsByClassName = function (match) {
+        var result = [],
+          elements = document.getElementsByTagName("*"),
+          i, elem;
+        match = " " + match + " ";
+        for (i = 0; i < elements.length; i++) {
+          elem = elements[i];
+          if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {
+            result.push(elem);
+          }
+        }
+        return result;
+      };
+    }
+    /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, hasClass, forEach */
+    
+    /**
+     * Add Event
+     * fn arg can be an object or a function, thanks to handleEvent
+     * read more at: http://www.thecssninja.com/javascript/handleevent
+     *
+     * @param  {element}  element
+     * @param  {event}    event
+     * @param  {Function} fn
+     * @param  {boolean}  bubbling
+     */
     var addEvent = function (el, evt, fn, bubble) {
         if ("addEventListener" in el) {
           // BBOS6 doesn't support handleEvent, catch and polyfill
@@ -64,6 +96,14 @@
         }
       },
     
+      /**
+       * Remove Event
+       *
+       * @param  {element}  element
+       * @param  {event}    event
+       * @param  {Function} fn
+       * @param  {boolean}  bubbling
+       */
       removeEvent = function (el, evt, fn, bubble) {
         if ("removeEventListener" in el) {
           try {
@@ -88,6 +128,12 @@
         }
       },
     
+      /**
+       * Get the children of any element
+       *
+       * @param  {element}
+       * @return {array} Returns matching elements in an array
+       */
       getChildren = function (e) {
         if (e.children.length < 1) {
           throw new Error("The Nav container has no containing elements");
@@ -103,25 +149,60 @@
         return children;
       },
     
+      /**
+       * Sets multiple attributes at once
+       *
+       * @param {element} element
+       * @param {attrs}   attrs
+       */
       setAttributes = function (el, attrs) {
         for (var key in attrs) {
           el.setAttribute(key, attrs[key]);
         }
       },
     
+      /**
+       * Adds a class to any element
+       *
+       * @param {element} element
+       * @param {string}  class
+       */
       addClass = function (el, cls) {
-        if (el.className.indexOf(cls) !== 0) {
+        if (!hasClass(el, cls)) {
           el.className += " " + cls;
           el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");
         }
       },
     
+      /**
+       * Remove a class from any element
+       *
+       * @param  {element} element
+       * @param  {string}  class
+       */
       removeClass = function (el, cls) {
         var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
         el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
       },
     
-      // forEach method that passes back the stuff we need
+      /**
+       * Checks if an element has certain class
+       *
+       * @param  {element}  element
+       * @param  {string}   class name
+       * @return {Boolean}
+       */
+      hasClass = function (el, cls) {
+        return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
+      },
+    
+      /**
+       * forEach method that passes back the stuff we need
+       *
+       * @param  {array}    array
+       * @param  {Function} callback
+       * @param  {scope}    scope
+       */
       forEach = function (array, callback, scope) {
         for (var i = 0; i < array.length; i++) {
           callback.call(scope, i, array[i]);
@@ -131,6 +212,7 @@
     var nav,
       opts,
       navToggle,
+      dropdownToggle,
       styleElement = document.createElement("style"),
       htmlEl = document.documentElement,
       hasAnimFinished,
@@ -140,7 +222,11 @@
     var ResponsiveNav = function (el, options) {
         var i;
 
-        // Default options
+
+        /**
+         * Default options
+         * @type {Object}
+         */
         this.options = {
           animate: true,                    // Boolean: Use CSS3 transitions, true or false
           transition: 284,                  // Integer: Speed of the transition, in milliseconds
@@ -194,7 +280,9 @@
 
     ResponsiveNav.prototype = {
 
-      // Public methods
+      /**
+       * Unattaches events and removes any classes that were added
+       */
       destroy: function () {
         this._removeStyles();
         removeClass(nav, "closed");
@@ -213,6 +301,15 @@
         removeEvent(navToggle, "keyup", this, false);
         removeEvent(navToggle, "click", this, false);
 
+        var self = this;
+        forEach(dropdownToggle, function (i, el) {
+          removeEvent(el, "touchstart", self, false);
+          removeEvent(el, "touchend", self, false);
+          removeEvent(el, "mouseup", self, false);
+          removeEvent(el, "keyup", self, false);
+          removeEvent(el, "click", self, false);
+        });
+
         if (!opts.customToggle) {
           navToggle.parentNode.removeChild(navToggle);
         } else {
@@ -220,6 +317,9 @@
         }
       },
 
+      /**
+       * Toggles the navigation open/close
+       */
       toggle: function () {
         if (hasAnimFinished === true) {
           if (!navOpen) {
@@ -227,9 +327,15 @@
           } else {
             this.close();
           }
+
+          // Enable pointer events again
+          this._enablePointerEvents();
         }
       },
 
+      /**
+       * Opens the navigation
+       */
       open: function () {
         if (!navOpen) {
           removeClass(nav, "closed");
@@ -243,6 +349,9 @@
         }
       },
 
+      /**
+       * Closes the navigation
+       */
       close: function () {
         if (navOpen) {
           addClass(nav, "closed");
@@ -251,14 +360,25 @@
           removeClass(navToggle, "active");
           setAttributes(nav, {"aria-hidden": "true"});
 
+          // If animations are enabled, wait until they finish
           if (opts.animate) {
             hasAnimFinished = false;
             setTimeout(function () {
               nav.style.position = "absolute";
               hasAnimFinished = true;
+              removeClass(nav, "dropdown-active");
+              forEach(dropdownToggle, function (i, el) {
+                removeClass(el.parentNode, "opened");
+              });
             }, opts.transition + 10);
+
+          // Animations aren't enabled, we can do these immediately
           } else {
             nav.style.position = "absolute";
+            removeClass(nav, "dropdown-active");
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
           }
 
           navOpen = false;
@@ -266,7 +386,13 @@
         }
       },
 
+      /**
+       * Resize is called on window resize and orientation change.
+       * It initializes the CSS styles and height calculations.
+       */
       resize: function () {
+
+        // Resize watches navigation toggle's display state
         if (window.getComputedStyle(navToggle, null).getPropertyValue("display") !== "none") {
 
           isMobile = true;
@@ -286,10 +412,20 @@
           setAttributes(navToggle, {"aria-hidden": "true"});
           setAttributes(nav, {"aria-hidden": "false"});
           nav.style.position = opts.openPos;
+          removeClass(nav, "dropdown-active");
+          forEach(dropdownToggle, function (i, el) {
+            removeClass(el.parentNode, "opened");
+          });
           this._removeStyles();
         }
       },
 
+      /**
+       * Takes care of all even handling
+       *
+       * @param  {event} event
+       * @return {type} returns the type of event that should be used
+       */
       handleEvent: function (e) {
         var evt = e || window.event;
 
@@ -316,7 +452,9 @@
         }
       },
 
-      // Private methods
+      /**
+       * Initializes the widget
+       */
       _init: function () {
         this.index = index++;
 
@@ -328,10 +466,15 @@
 
         this._closeOnNavClick();
         this._createToggle();
+        this._createDropdowns();
         this._transitions();
         this.resize();
 
-        // IE8 hack
+        /**
+         * On IE8 the resize event triggers too early for some reason
+         * so it's called here again on init to make sure all the
+         * calculated styles are correct.
+         */
         var self = this;
         setTimeout(function () {
           self.resize();
@@ -345,10 +488,15 @@
         addEvent(navToggle, "keyup", this, false);
         addEvent(navToggle, "click", this, false);
 
-        // Init callback
+        /**
+         * Init callback here
+         */
         opts.init();
       },
 
+      /**
+       * Creates Styles to the <head>
+       */
       _createStyles: function () {
         if (!styleElement.parentNode) {
           styleElement.type = "text/css";
@@ -356,13 +504,19 @@
         }
       },
 
+      /**
+       * Removes styles from the <head>
+       */
       _removeStyles: function () {
-        if (styleElement.parentNode) {
-          styleElement.parentNode.removeChild(styleElement);
-        }
+        if (styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);
       },
 
+      /**
+       * Creates Navigation Toggle
+       */
       _createToggle: function () {
+
+        // If there's no toggle, let's create one
         if (!opts.customToggle) {
           var toggle = document.createElement("a");
           toggle.innerHTML = opts.label;
@@ -371,6 +525,7 @@
             "class": "nav-toggle"
           });
 
+          // Determine where to insert the toggle
           if (opts.insert === "after") {
             nav.parentNode.insertBefore(toggle, nav.nextSibling);
           } else {
@@ -378,6 +533,8 @@
           }
 
           navToggle = toggle;
+
+        // There is a toggle already, let's use that one
         } else {
           var toggleEl = opts.customToggle.replace("#", "");
 
@@ -391,75 +548,225 @@
         }
       },
 
+      /**
+       * Attaches event listeners to all sub-navigation toggles
+       */
+      _createDropdowns: function () {
+        var self = this;
+
+        // If getElementsByClassName is supported
+        if (elemsByClassName) {
+          dropdownToggle = nav.getElementsByClassName("dropdown-toggle");
+
+        // If not, use polyfill version (on old IEs)
+        } else {
+          dropdownToggle = document.getElementsByClassName("dropdown-toggle");
+        }
+
+        forEach(dropdownToggle, function (i, el) {
+          addEvent(el, "touchstart", self, false);
+          addEvent(el, "touchend", self, false);
+          addEvent(el, "mouseup", self, false);
+          addEvent(el, "keyup", self, false);
+          addEvent(el, "click", self, false);
+        });
+      },
+
+      /**
+       * Toggles sub-navigations open/closed
+       *
+       * @param  {element} The toggle that was tapped
+       */
+      _toggleDropdown: function (targetEl) {
+
+        // Enable active class to let the navigation expand over
+        // the calculated max height
+        addClass(nav, "dropdown-active");
+
+        // Check if the sub-navigation is inside another sub-nav
+        var parentEl = targetEl.parentNode,
+          isInsideSub = hasClass(parentEl.parentNode.parentNode, "dropdown");
+
+        // If it's already open, close it
+        if (hasClass(parentEl, "opened")) {
+          removeClass(parentEl, "opened");
+
+          // If not inside sub-navigation, we can reset the whole nav
+          if (!isInsideSub) removeClass(nav, "dropdown-active");
+
+        // navigation is closed, let's open it
+        } else {
+
+          // If it's inside sub-navigation
+          if (isInsideSub) {
+            forEach(getChildren(parentEl.parentNode), function (i, el) {
+              removeClass(el, "opened");
+            });
+            addClass(parentEl, "opened");
+
+          // Not inside another sub-nav
+          } else {
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
+            addClass(parentEl, "opened");
+          }
+        }
+
+        // Enable pointer events again
+        this._enablePointerEvents();
+      },
+
+      /**
+       * Closes the navigation when a link inside is clicked
+       */
       _closeOnNavClick: function () {
-        if (opts.closeOnNavClick && "querySelectorAll" in document) {
-          var links = nav.querySelectorAll("a"),
+        if (opts.closeOnNavClick) {
+          var links = nav.getElementsByTagName("a"),
             self = this;
           forEach(links, function (i, el) {
             addEvent(links[i], "click", function () {
-              if (isMobile) {
-                self.toggle();
-              }
+              if (isMobile) self.toggle();
             }, false);
           });
         }
       },
 
+      /**
+       * Prevents the default tap functionality
+       *
+       * @param  {event} event
+       */
       _preventDefault: function(e) {
+        // If you want dropdown links to be clickable on desktop remove comments:
+        /*if (!isMobile) return;*/
         if (e.preventDefault) {
+          if (e.stopImmediatePropagation) e.stopImmediatePropagation();
           e.preventDefault();
           e.stopPropagation();
+          return false;
+
+        // This is strictly for old IE
         } else {
           e.returnValue = false;
         }
       },
 
+      /**
+       * On touch start get the location of the touch
+       * and disable pointer events on the body.
+       *
+       * @param  {event} event
+       */
       _onTouchStart: function (e) {
-        e.stopPropagation();
-        if (opts.insert === "after") {
-          addClass(document.body, "disable-pointer-events");
-        }
+        this._preventDefault(e);
+        addClass(document.body, "disable-pointer-events");
         this.startX = e.touches[0].clientX;
         this.startY = e.touches[0].clientY;
         this.touchHasMoved = false;
-        removeEvent(navToggle, "mouseup", this, false);
+
+        /**
+         * We remove mouseup event completely here to avoid
+         * double triggering of events.
+         */
+        removeEvent(e.target, "mouseup", this, false);
       },
 
+      /**
+       * Check if the user is scrolling instead of tapping and
+       * re-enable pointer events if movement happed.
+       *
+       * @param  {event} event
+       */
       _onTouchMove: function (e) {
         if (Math.abs(e.touches[0].clientX - this.startX) > 10 ||
         Math.abs(e.touches[0].clientY - this.startY) > 10) {
+          this._enablePointerEvents();
           this.touchHasMoved = true;
         }
       },
 
+      /**
+       * On touch end toggle either the whole navigation or
+       * a sub-navigation depending on which one was tapped.
+       *
+       * @param  {event} event
+       */
       _onTouchEnd: function (e) {
         this._preventDefault(e);
+        if (!isMobile) return;
+
+        // Get event.target, the old IE way
+        var thisEvent = e || window.event,
+          targetEl = thisEvent.target || thisEvent.srcElement,
+          isDropdownTapped = false;
+
+        // Was it sub-navigation toggle or the main toggle?
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+
+        // If the user isn't scrolling
         if (!this.touchHasMoved) {
+
+          // If the event type is touch
           if (e.type === "touchend") {
-            this.toggle();
-            if (opts.insert === "after") {
-              setTimeout(function () {
-                removeClass(document.body, "disable-pointer-events");
-              }, opts.transition + 300);
+
+            // If sub-navigation toggle was tapped
+            if (isDropdownTapped) {
+              this._toggleDropdown(targetEl);
+
+            // If the main toggle was tapped
+            } else {
+              this.toggle();
             }
             return;
+
+          // Event type was click, not touch
           } else {
             var evt = e || window.event;
-            // If it isn't a right click
+
+            // If it isn't a right click, do toggling
             if (!(evt.which === 3 || evt.button === 2)) {
-              this.toggle();
+              if (isDropdownTapped) {
+                this._toggleDropdown(targetEl);
+              } else {
+                this.toggle();
+              }
             }
           }
         }
       },
 
+      /**
+       * For keyboard accessibility, toggle the navigation on Enter
+       * keypress too (also sub-navigation is keyboard accessible
+       * which explains the complexity here)
+       *
+       * @param  {event} event
+       */
       _onKeyUp: function (e) {
-        var evt = e || window.event;
-        if (evt.keyCode === 13) {
-          this.toggle();
+        var evt = e || window.event,
+          targetEl = e.target,
+          isDropdownTapped = false;
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+        if (evt.keyCode === 13) {
+          if (isDropdownTapped) {
+            this._toggleDropdown(targetEl);
+          } else {
+            this.toggle();
+          }
         }
       },
 
+      /**
+       * Enable pointer events
+       */
+      _enablePointerEvents: function () {
+        removeClass(document.body, "disable-pointer-events");
+      },
+
+      /**
+       * Adds the needed CSS transitions if animations are enabled
+       */
       _transitions: function () {
         if (opts.animate) {
           var objStyle = nav.style,
@@ -472,12 +779,18 @@
         }
       },
 
+      /**
+       * Calculates the height of the navigation and then creates
+       * styles which are later added to the page <head>
+       */
       _calcHeight: function () {
         var savedHeight = 0;
         for (var i = 0; i < nav.inner.length; i++) {
           savedHeight += nav.inner[i].offsetHeight;
         }
-        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important}";
+
+        // Pointer event styles are also here since they might only be confusing inside the stylesheet
+        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important} ." + opts.jsClass + " .disable-pointer-events{pointer-events:none !important} ." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened.dropdown-active {max-height:9999px !important}";
 
         if (styleElement.styleSheet) {
           styleElement.styleSheet.cssText = innerStyles;
@@ -490,6 +803,9 @@
 
     };
 
+    /**
+     * Return new Responsive Nav
+     */
     return new ResponsiveNav(el, options);
 
   };
diff --git a/client/dist/responsive-nav.min.js b/client/dist/responsive-nav.min.js
index 714c165..8f8afdc 100644
--- a/client/dist/responsive-nav.min.js
+++ b/client/dist/responsive-nav.min.js
@@ -1 +1 @@
-!function(a,b,c){"use strict";var d=function(d,e){var f=!!b.getComputedStyle;f||(b.getComputedStyle=function(a){return this.el=a,this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;return"float"===b&&(b="styleFloat"),c.test(b)&&(b=b.replace(c,function(){return arguments[2].toUpperCase()})),a.currentStyle[b]?a.currentStyle[b]:null},this});var g,h,i,j,k,l,m=function(a,b,c,d){if("addEventListener"in a)try{a.addEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.addEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"attachEvent"in a&&("object"==typeof c&&c.handleEvent?a.attachEvent("on"+b,function(){c.handleEvent.call(c)}):a.attachEvent("on"+b,c))},n=function(a,b,c,d){if("removeEventListener"in a)try{a.removeEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.removeEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"detachEvent"in a&&("object"==typeof c&&c.handleEvent?a.detachEvent("on"+b,function(){c.handleEvent.call(c)}):a.detachEvent("on"+b,c))},o=function(a){if(a.children.length<1)throw new Error("The Nav container has no containing elements");for(var b=[],c=0;c<a.children.length;c++)1===a.children[c].nodeType&&b.push(a.children[c]);return b},p=function(a,b){for(var c in b)a.setAttribute(c,b[c])},q=function(a,b){0!==a.className.indexOf(b)&&(a.className+=" "+b,a.className=a.className.replace(/(^\s*)|(\s*$)/g,""))},r=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ").replace(/(^\s*)|(\s*$)/g,"")},s=function(a,b,c){for(var d=0;d<a.length;d++)b.call(c,d,a[d])},t=a.createElement("style"),u=a.documentElement,v=function(b,c){var d;this.options={animate:!0,transition:284,label:"Menu",insert:"before",customToggle:"",closeOnNavClick:!1,openPos:"relative",navClass:"nav-collapse",navActiveClass:"js-nav-active",jsClass:"js",init:function(){},open:function(){},close:function(){}};for(d in c)this.options[d]=c[d];if(q(u,this.options.jsClass),this.wrapperEl=b.replace("#",""),a.getElementById(this.wrapperEl))this.wrapper=a.getElementById(this.wrapperEl);else{if(!a.querySelector(this.wrapperEl))throw new Error("The nav element you are trying to select doesn't exist");this.wrapper=a.querySelector(this.wrapperEl)}this.wrapper.inner=o(this.wrapper),h=this.options,g=this.wrapper,this._init(this)};return v.prototype={destroy:function(){this._removeStyles(),r(g,"closed"),r(g,"opened"),r(g,h.navClass),r(g,h.navClass+"-"+this.index),r(u,h.navActiveClass),g.removeAttribute("style"),g.removeAttribute("aria-hidden"),n(b,"resize",this,!1),n(a.body,"touchmove",this,!1),n(i,"touchstart",this,!1),n(i,"touchend",this,!1),n(i,"mouseup",this,!1),n(i,"keyup",this,!1),n(i,"click",this,!1),h.customToggle?i.removeAttribute("aria-hidden"):i.parentNode.removeChild(i)},toggle:function(){j===!0&&(l?this.close():this.open())},open:function(){l||(r(g,"closed"),q(g,"opened"),q(u,h.navActiveClass),q(i,"active"),g.style.position=h.openPos,p(g,{"aria-hidden":"false"}),l=!0,h.open())},close:function(){l&&(q(g,"closed"),r(g,"opened"),r(u,h.navActiveClass),r(i,"active"),p(g,{"aria-hidden":"true"}),h.animate?(j=!1,setTimeout(function(){g.style.position="absolute",j=!0},h.transition+10)):g.style.position="absolute",l=!1,h.close())},resize:function(){"none"!==b.getComputedStyle(i,null).getPropertyValue("display")?(k=!0,p(i,{"aria-hidden":"false"}),g.className.match(/(^|\s)closed(\s|$)/)&&(p(g,{"aria-hidden":"true"}),g.style.position="absolute"),this._createStyles(),this._calcHeight()):(k=!1,p(i,{"aria-hidden":"true"}),p(g,{"aria-hidden":"false"}),g.style.position=h.openPos,this._removeStyles())},handleEvent:function(a){var c=a||b.event;switch(c.type){case"touchstart":this._onTouchStart(c);break;case"touchmove":this._onTouchMove(c);break;case"touchend":case"mouseup":this._onTouchEnd(c);break;case"click":this._preventDefault(c);break;case"keyup":this._onKeyUp(c);break;case"resize":this.resize(c)}},_init:function(){this.index=c++,q(g,h.navClass),q(g,h.navClass+"-"+this.index),q(g,"closed"),j=!0,l=!1,this._closeOnNavClick(),this._createToggle(),this._transitions(),this.resize();var d=this;setTimeout(function(){d.resize()},20),m(b,"resize",this,!1),m(a.body,"touchmove",this,!1),m(i,"touchstart",this,!1),m(i,"touchend",this,!1),m(i,"mouseup",this,!1),m(i,"keyup",this,!1),m(i,"click",this,!1),h.init()},_createStyles:function(){t.parentNode||(t.type="text/css",a.getElementsByTagName("head")[0].appendChild(t))},_removeStyles:function(){t.parentNode&&t.parentNode.removeChild(t)},_createToggle:function(){if(h.customToggle){var b=h.customToggle.replace("#","");if(a.getElementById(b))i=a.getElementById(b);else{if(!a.querySelector(b))throw new Error("The custom nav toggle you are trying to select doesn't exist");i=a.querySelector(b)}}else{var c=a.createElement("a");c.innerHTML=h.label,p(c,{href:"#","class":"nav-toggle"}),"after"===h.insert?g.parentNode.insertBefore(c,g.nextSibling):g.parentNode.insertBefore(c,g),i=c}},_closeOnNavClick:function(){if(h.closeOnNavClick&&"querySelectorAll"in a){var b=g.querySelectorAll("a"),c=this;s(b,function(a){m(b[a],"click",function(){k&&c.toggle()},!1)})}},_preventDefault:function(a){a.preventDefault?(a.preventDefault(),a.stopPropagation()):a.returnValue=!1},_onTouchStart:function(b){b.stopPropagation(),"after"===h.insert&&q(a.body,"disable-pointer-events"),this.startX=b.touches[0].clientX,this.startY=b.touches[0].clientY,this.touchHasMoved=!1,n(i,"mouseup",this,!1)},_onTouchMove:function(a){(Math.abs(a.touches[0].clientX-this.startX)>10||Math.abs(a.touches[0].clientY-this.startY)>10)&&(this.touchHasMoved=!0)},_onTouchEnd:function(c){if(this._preventDefault(c),!this.touchHasMoved){if("touchend"===c.type)return this.toggle(),"after"===h.insert&&setTimeout(function(){r(a.body,"disable-pointer-events")},h.transition+300),void 0;var d=c||b.event;3!==d.which&&2!==d.button&&this.toggle()}},_onKeyUp:function(a){var c=a||b.event;13===c.keyCode&&this.toggle()},_transitions:function(){if(h.animate){var a=g.style,b="max-height "+h.transition+"ms";a.WebkitTransition=b,a.MozTransition=b,a.OTransition=b,a.transition=b}},_calcHeight:function(){for(var a=0,b=0;b<g.inner.length;b++)a+=g.inner[b].offsetHeight;var c="."+h.jsClass+" ."+h.navClass+"-"+this.index+".opened{max-height:"+a+"px !important}";t.styleSheet?t.styleSheet.cssText=c:t.innerHTML=c,c=""}},new v(d,e)};b.responsiveNav=d}(document,window,0);
\ No newline at end of file
+!function(a,b,c){"use strict";var d=function(d,e){var f=!!b.getComputedStyle,g=!!a.getElementsByClassName;f||(b.getComputedStyle=function(a){return this.el=a,this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;return"float"===b&&(b="styleFloat"),c.test(b)&&(b=b.replace(c,function(){return arguments[2].toUpperCase()})),a.currentStyle[b]?a.currentStyle[b]:null},this}),g||(a.getElementsByClassName=function(b){var c,d,e=[],f=a.getElementsByTagName("*");for(b=" "+b+" ",c=0;c<f.length;c++)d=f[c],(" "+(d.className||d.getAttribute("class"))+" ").indexOf(b)>-1&&e.push(d);return e});var h,i,j,k,l,m,n,o=function(a,b,c,d){if("addEventListener"in a)try{a.addEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.addEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"attachEvent"in a&&("object"==typeof c&&c.handleEvent?a.attachEvent("on"+b,function(){c.handleEvent.call(c)}):a.attachEvent("on"+b,c))},p=function(a,b,c,d){if("removeEventListener"in a)try{a.removeEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.removeEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"detachEvent"in a&&("object"==typeof c&&c.handleEvent?a.detachEvent("on"+b,function(){c.handleEvent.call(c)}):a.detachEvent("on"+b,c))},q=function(a){if(a.children.length<1)throw new Error("The Nav container has no containing elements");for(var b=[],c=0;c<a.children.length;c++)1===a.children[c].nodeType&&b.push(a.children[c]);return b},r=function(a,b){for(var c in b)a.setAttribute(c,b[c])},s=function(a,b){u(a,b)||(a.className+=" "+b,a.className=a.className.replace(/(^\s*)|(\s*$)/g,""))},t=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ").replace(/(^\s*)|(\s*$)/g,"")},u=function(a,b){return a.className&&new RegExp("(\\s|^)"+b+"(\\s|$)").test(a.className)},v=function(a,b,c){for(var d=0;d<a.length;d++)b.call(c,d,a[d])},w=a.createElement("style"),x=a.documentElement,y=function(b,c){var d;this.options={animate:!0,transition:284,label:"Menu",insert:"before",customToggle:"",closeOnNavClick:!1,openPos:"relative",navClass:"nav-collapse",navActiveClass:"js-nav-active",jsClass:"js",init:function(){},open:function(){},close:function(){}};for(d in c)this.options[d]=c[d];if(s(x,this.options.jsClass),this.wrapperEl=b.replace("#",""),a.getElementById(this.wrapperEl))this.wrapper=a.getElementById(this.wrapperEl);else{if(!a.querySelector(this.wrapperEl))throw new Error("The nav element you are trying to select doesn't exist");this.wrapper=a.querySelector(this.wrapperEl)}this.wrapper.inner=q(this.wrapper),i=this.options,h=this.wrapper,this._init(this)};return y.prototype={destroy:function(){this._removeStyles(),t(h,"closed"),t(h,"opened"),t(h,i.navClass),t(h,i.navClass+"-"+this.index),t(x,i.navActiveClass),h.removeAttribute("style"),h.removeAttribute("aria-hidden"),p(b,"resize",this,!1),p(a.body,"touchmove",this,!1),p(j,"touchstart",this,!1),p(j,"touchend",this,!1),p(j,"mouseup",this,!1),p(j,"keyup",this,!1),p(j,"click",this,!1);var c=this;v(k,function(a,b){p(b,"touchstart",c,!1),p(b,"touchend",c,!1),p(b,"mouseup",c,!1),p(b,"keyup",c,!1),p(b,"click",c,!1)}),i.customToggle?j.removeAttribute("aria-hidden"):j.parentNode.removeChild(j)},toggle:function(){l===!0&&(n?this.close():this.open(),this._enablePointerEvents())},open:function(){n||(t(h,"closed"),s(h,"opened"),s(x,i.navActiveClass),s(j,"active"),h.style.position=i.openPos,r(h,{"aria-hidden":"false"}),n=!0,i.open())},close:function(){n&&(s(h,"closed"),t(h,"opened"),t(x,i.navActiveClass),t(j,"active"),r(h,{"aria-hidden":"true"}),i.animate?(l=!1,setTimeout(function(){h.style.position="absolute",l=!0,t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")})},i.transition+10)):(h.style.position="absolute",t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")})),n=!1,i.close())},resize:function(){"none"!==b.getComputedStyle(j,null).getPropertyValue("display")?(m=!0,r(j,{"aria-hidden":"false"}),h.className.match(/(^|\s)closed(\s|$)/)&&(r(h,{"aria-hidden":"true"}),h.style.position="absolute"),this._createStyles(),this._calcHeight()):(m=!1,r(j,{"aria-hidden":"true"}),r(h,{"aria-hidden":"false"}),h.style.position=i.openPos,t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")}),this._removeStyles())},handleEvent:function(a){var c=a||b.event;switch(c.type){case"touchstart":this._onTouchStart(c);break;case"touchmove":this._onTouchMove(c);break;case"touchend":case"mouseup":this._onTouchEnd(c);break;case"click":this._preventDefault(c);break;case"keyup":this._onKeyUp(c);break;case"resize":this.resize(c)}},_init:function(){this.index=c++,s(h,i.navClass),s(h,i.navClass+"-"+this.index),s(h,"closed"),l=!0,n=!1,this._closeOnNavClick(),this._createToggle(),this._createDropdowns(),this._transitions(),this.resize();var d=this;setTimeout(function(){d.resize()},20),o(b,"resize",this,!1),o(a.body,"touchmove",this,!1),o(j,"touchstart",this,!1),o(j,"touchend",this,!1),o(j,"mouseup",this,!1),o(j,"keyup",this,!1),o(j,"click",this,!1),i.init()},_createStyles:function(){w.parentNode||(w.type="text/css",a.getElementsByTagName("head")[0].appendChild(w))},_removeStyles:function(){w.parentNode&&w.parentNode.removeChild(w)},_createToggle:function(){if(i.customToggle){var b=i.customToggle.replace("#","");if(a.getElementById(b))j=a.getElementById(b);else{if(!a.querySelector(b))throw new Error("The custom nav toggle you are trying to select doesn't exist");j=a.querySelector(b)}}else{var c=a.createElement("a");c.innerHTML=i.label,r(c,{href:"#","class":"nav-toggle"}),"after"===i.insert?h.parentNode.insertBefore(c,h.nextSibling):h.parentNode.insertBefore(c,h),j=c}},_createDropdowns:function(){var b=this;k=g?h.getElementsByClassName("dropdown-toggle"):a.getElementsByClassName("dropdown-toggle"),v(k,function(a,c){o(c,"touchstart",b,!1),o(c,"touchend",b,!1),o(c,"mouseup",b,!1),o(c,"keyup",b,!1),o(c,"click",b,!1)})},_toggleDropdown:function(a){s(h,"dropdown-active");var b=a.parentNode,c=u(b.parentNode.parentNode,"dropdown");u(b,"opened")?(t(b,"opened"),c||t(h,"dropdown-active")):c?(v(q(b.parentNode),function(a,b){t(b,"opened")}),s(b,"opened")):(v(k,function(a,b){t(b.parentNode,"opened")}),s(b,"opened")),this._enablePointerEvents()},_closeOnNavClick:function(){if(i.closeOnNavClick){var a=h.getElementsByTagName("a"),b=this;v(a,function(c){o(a[c],"click",function(){m&&b.toggle()},!1)})}},_preventDefault:function(a){return a.preventDefault?(a.stopImmediatePropagation&&a.stopImmediatePropagation(),a.preventDefault(),a.stopPropagation(),!1):(a.returnValue=!1,void 0)},_onTouchStart:function(b){this._preventDefault(b),s(a.body,"disable-pointer-events"),this.startX=b.touches[0].clientX,this.startY=b.touches[0].clientY,this.touchHasMoved=!1,p(b.target,"mouseup",this,!1)},_onTouchMove:function(a){(Math.abs(a.touches[0].clientX-this.startX)>10||Math.abs(a.touches[0].clientY-this.startY)>10)&&(this._enablePointerEvents(),this.touchHasMoved=!0)},_onTouchEnd:function(a){if(this._preventDefault(a),m){var c=a||b.event,d=c.target||c.srcElement,e=!1;if(u(d,"dropdown-toggle")&&(e=!0),!this.touchHasMoved){if("touchend"===a.type)return e?this._toggleDropdown(d):this.toggle(),void 0;var f=a||b.event;3!==f.which&&2!==f.button&&(e?this._toggleDropdown(d):this.toggle())}}},_onKeyUp:function(a){var c=a||b.event,d=a.target,e=!1;u(d,"dropdown-toggle")&&(e=!0),13===c.keyCode&&(e?this._toggleDropdown(d):this.toggle())},_enablePointerEvents:function(){t(a.body,"disable-pointer-events")},_transitions:function(){if(i.animate){var a=h.style,b="max-height "+i.transition+"ms";a.WebkitTransition=b,a.MozTransition=b,a.OTransition=b,a.transition=b}},_calcHeight:function(){for(var a=0,b=0;b<h.inner.length;b++)a+=h.inner[b].offsetHeight;var c="."+i.jsClass+" ."+i.navClass+"-"+this.index+".opened{max-height:"+a+"px !important} ."+i.jsClass+" .disable-pointer-events{pointer-events:none !important} ."+i.jsClass+" ."+i.navClass+"-"+this.index+".opened.dropdown-active {max-height:9999px !important}";w.styleSheet?w.styleSheet.cssText=c:w.innerHTML=c,c=""}},new y(d,e)};b.responsiveNav=d}(document,window,0);
\ No newline at end of file
diff --git a/client/dist/styles/responsive-nav.css b/client/dist/styles/responsive-nav.css
index d0ac2e2..33bc105 100644
--- a/client/dist/styles/responsive-nav.css
+++ b/client/dist/styles/responsive-nav.css
@@ -1,4 +1,4 @@
-/*! responsive-nav.js 1.0.32 by @viljamis */
+/*! responsive-nav.js 1.0.40 by @viljamis */
 
 .nav-collapse ul {
   margin: 0;
@@ -13,7 +13,8 @@
   display: block;
 }
 
-.js .nav-collapse {
+.js .nav-collapse,
+.js .nav-collapse .dropdown ul {
   clip: rect(0 0 0 0);
   max-height: 0;
   position: absolute;
@@ -22,15 +23,18 @@
   zoom: 1;
 }
 
-.nav-collapse.opened {
+.nav-collapse.opened,
+.nav-collapse .dropdown.opened ul {
   max-height: 9999px;
 }
 
-.disable-pointer-events {
-  pointer-events: none !important;
+.nav-collapse .dropdown.opened > ul,
+.nav-collapse .dropdown .dropdown.opened > ul {
+  position: relative;
 }
 
-.nav-toggle {
+.nav-toggle,
+.dropdown-toggle {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -44,7 +48,8 @@
   .js .nav-collapse {
     position: relative;
   }
-  .js .nav-collapse.closed {
+  .js .nav-collapse.closed,
+  .js .nav-collapse.closed .dropdown ul {
     max-height: none;
   }
   .nav-toggle {
diff --git a/client/src/helpers.js b/client/src/helpers.js
index 90ad494..db9f172 100644
--- a/client/src/helpers.js
+++ b/client/src/helpers.js
@@ -1,6 +1,15 @@
-/* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */
-// fn arg can be an object or a function, thanks to handleEvent
-// read more at: http://www.thecssninja.com/javascript/handleevent
+/* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, hasClass, forEach */
+
+/**
+ * Add Event
+ * fn arg can be an object or a function, thanks to handleEvent
+ * read more at: http://www.thecssninja.com/javascript/handleevent
+ *
+ * @param  {element}  element
+ * @param  {event}    event
+ * @param  {Function} fn
+ * @param  {boolean}  bubbling
+ */
 var addEvent = function (el, evt, fn, bubble) {
     if ("addEventListener" in el) {
       // BBOS6 doesn't support handleEvent, catch and polyfill
@@ -29,6 +38,14 @@ var addEvent = function (el, evt, fn, bubble) {
     }
   },
 
+  /**
+   * Remove Event
+   *
+   * @param  {element}  element
+   * @param  {event}    event
+   * @param  {Function} fn
+   * @param  {boolean}  bubbling
+   */
   removeEvent = function (el, evt, fn, bubble) {
     if ("removeEventListener" in el) {
       try {
@@ -53,6 +70,12 @@ var addEvent = function (el, evt, fn, bubble) {
     }
   },
 
+  /**
+   * Get the children of any element
+   *
+   * @param  {element}
+   * @return {array} Returns matching elements in an array
+   */
   getChildren = function (e) {
     if (e.children.length < 1) {
       throw new Error("The Nav container has no containing elements");
@@ -68,25 +91,60 @@ var addEvent = function (el, evt, fn, bubble) {
     return children;
   },
 
+  /**
+   * Sets multiple attributes at once
+   *
+   * @param {element} element
+   * @param {attrs}   attrs
+   */
   setAttributes = function (el, attrs) {
     for (var key in attrs) {
       el.setAttribute(key, attrs[key]);
     }
   },
 
+  /**
+   * Adds a class to any element
+   *
+   * @param {element} element
+   * @param {string}  class
+   */
   addClass = function (el, cls) {
-    if (el.className.indexOf(cls) !== 0) {
+    if (!hasClass(el, cls)) {
       el.className += " " + cls;
       el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");
     }
   },
 
+  /**
+   * Remove a class from any element
+   *
+   * @param  {element} element
+   * @param  {string}  class
+   */
   removeClass = function (el, cls) {
     var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
     el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
   },
 
-  // forEach method that passes back the stuff we need
+  /**
+   * Checks if an element has certain class
+   *
+   * @param  {element}  element
+   * @param  {string}   class name
+   * @return {Boolean}
+   */
+  hasClass = function (el, cls) {
+    return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
+  },
+
+  /**
+   * forEach method that passes back the stuff we need
+   *
+   * @param  {array}    array
+   * @param  {Function} callback
+   * @param  {scope}    scope
+   */
   forEach = function (array, callback, scope) {
     for (var i = 0; i < array.length; i++) {
       callback.call(scope, i, array[i]);
diff --git a/client/src/polyfills.js b/client/src/polyfills.js
index 084d0db..707392a 100644
--- a/client/src/polyfills.js
+++ b/client/src/polyfills.js
@@ -1,10 +1,13 @@
 var computed = !!window.getComputedStyle;
+var elemsByClassName = !!document.getElementsByClassName;
 
-// getComputedStyle polyfill
+/**
+ * getComputedStyle polyfill for old browsers
+ */
 if (!computed) {
-  window.getComputedStyle = function(el) {
+  window.getComputedStyle = function (el) {
     this.el = el;
-    this.getPropertyValue = function(prop) {
+    this.getPropertyValue = function (prop) {
       var re = /(\-([a-z]){1})/g;
       if (prop === "float") {
         prop = "styleFloat";
@@ -19,3 +22,22 @@ if (!computed) {
     return this;
   };
 }
+
+/**
+ * GetElementsByClassName polyfill for old browsers
+ */
+if (!elemsByClassName) {
+  document.getElementsByClassName = function (match) {
+    var result = [],
+      elements = document.getElementsByTagName("*"),
+      i, elem;
+    match = " " + match + " ";
+    for (i = 0; i < elements.length; i++) {
+      elem = elements[i];
+      if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {
+        result.push(elem);
+      }
+    }
+    return result;
+  };
+}
diff --git a/client/src/responsive-nav.js b/client/src/responsive-nav.js
index 60684b3..de812be 100644
--- a/client/src/responsive-nav.js
+++ b/client/src/responsive-nav.js
@@ -7,6 +7,7 @@
  */
 
 (function (document, window, index) {
+  // Index is used to keep multiple navs on the same page namespaced
 
   "use strict";
 
@@ -18,6 +19,7 @@
     var nav,
       opts,
       navToggle,
+      dropdownToggle,
       styleElement = document.createElement("style"),
       htmlEl = document.documentElement,
       hasAnimFinished,
@@ -27,7 +29,11 @@
     var ResponsiveNav = function (el, options) {
         var i;
 
-        // Default options
+
+        /**
+         * Default options
+         * @type {Object}
+         */
         this.options = {
           animate: true,                    // Boolean: Use CSS3 transitions, true or false
           transition: 284,                  // Integer: Speed of the transition, in milliseconds
@@ -81,7 +87,9 @@
 
     ResponsiveNav.prototype = {
 
-      // Public methods
+      /**
+       * Unattaches events and removes any classes that were added
+       */
       destroy: function () {
         this._removeStyles();
         removeClass(nav, "closed");
@@ -100,6 +108,15 @@
         removeEvent(navToggle, "keyup", this, false);
         removeEvent(navToggle, "click", this, false);
 
+        var self = this;
+        forEach(dropdownToggle, function (i, el) {
+          removeEvent(el, "touchstart", self, false);
+          removeEvent(el, "touchend", self, false);
+          removeEvent(el, "mouseup", self, false);
+          removeEvent(el, "keyup", self, false);
+          removeEvent(el, "click", self, false);
+        });
+
         if (!opts.customToggle) {
           navToggle.parentNode.removeChild(navToggle);
         } else {
@@ -107,6 +124,9 @@
         }
       },
 
+      /**
+       * Toggles the navigation open/close
+       */
       toggle: function () {
         if (hasAnimFinished === true) {
           if (!navOpen) {
@@ -114,9 +134,15 @@
           } else {
             this.close();
           }
+
+          // Enable pointer events again
+          this._enablePointerEvents();
         }
       },
 
+      /**
+       * Opens the navigation
+       */
       open: function () {
         if (!navOpen) {
           removeClass(nav, "closed");
@@ -130,6 +156,9 @@
         }
       },
 
+      /**
+       * Closes the navigation
+       */
       close: function () {
         if (navOpen) {
           addClass(nav, "closed");
@@ -138,14 +167,25 @@
           removeClass(navToggle, "active");
           setAttributes(nav, {"aria-hidden": "true"});
 
+          // If animations are enabled, wait until they finish
           if (opts.animate) {
             hasAnimFinished = false;
             setTimeout(function () {
               nav.style.position = "absolute";
               hasAnimFinished = true;
+              removeClass(nav, "dropdown-active");
+              forEach(dropdownToggle, function (i, el) {
+                removeClass(el.parentNode, "opened");
+              });
             }, opts.transition + 10);
+
+          // Animations aren't enabled, we can do these immediately
           } else {
             nav.style.position = "absolute";
+            removeClass(nav, "dropdown-active");
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
           }
 
           navOpen = false;
@@ -153,7 +193,13 @@
         }
       },
 
+      /**
+       * Resize is called on window resize and orientation change.
+       * It initializes the CSS styles and height calculations.
+       */
       resize: function () {
+
+        // Resize watches navigation toggle's display state
         if (window.getComputedStyle(navToggle, null).getPropertyValue("display") !== "none") {
 
           isMobile = true;
@@ -173,10 +219,20 @@
           setAttributes(navToggle, {"aria-hidden": "true"});
           setAttributes(nav, {"aria-hidden": "false"});
           nav.style.position = opts.openPos;
+          removeClass(nav, "dropdown-active");
+          forEach(dropdownToggle, function (i, el) {
+            removeClass(el.parentNode, "opened");
+          });
           this._removeStyles();
         }
       },
 
+      /**
+       * Takes care of all even handling
+       *
+       * @param  {event} event
+       * @return {type} returns the type of event that should be used
+       */
       handleEvent: function (e) {
         var evt = e || window.event;
 
@@ -203,7 +259,9 @@
         }
       },
 
-      // Private methods
+      /**
+       * Initializes the widget
+       */
       _init: function () {
         this.index = index++;
 
@@ -215,10 +273,15 @@
 
         this._closeOnNavClick();
         this._createToggle();
+        this._createDropdowns();
         this._transitions();
         this.resize();
 
-        // IE8 hack
+        /**
+         * On IE8 the resize event triggers too early for some reason
+         * so it's called here again on init to make sure all the
+         * calculated styles are correct.
+         */
         var self = this;
         setTimeout(function () {
           self.resize();
@@ -232,10 +295,15 @@
         addEvent(navToggle, "keyup", this, false);
         addEvent(navToggle, "click", this, false);
 
-        // Init callback
+        /**
+         * Init callback here
+         */
         opts.init();
       },
 
+      /**
+       * Creates Styles to the <head>
+       */
       _createStyles: function () {
         if (!styleElement.parentNode) {
           styleElement.type = "text/css";
@@ -243,13 +311,19 @@
         }
       },
 
+      /**
+       * Removes styles from the <head>
+       */
       _removeStyles: function () {
-        if (styleElement.parentNode) {
-          styleElement.parentNode.removeChild(styleElement);
-        }
+        if (styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);
       },
 
+      /**
+       * Creates Navigation Toggle
+       */
       _createToggle: function () {
+
+        // If there's no toggle, let's create one
         if (!opts.customToggle) {
           var toggle = document.createElement("a");
           toggle.innerHTML = opts.label;
@@ -258,6 +332,7 @@
             "class": "nav-toggle"
           });
 
+          // Determine where to insert the toggle
           if (opts.insert === "after") {
             nav.parentNode.insertBefore(toggle, nav.nextSibling);
           } else {
@@ -265,6 +340,8 @@
           }
 
           navToggle = toggle;
+
+        // There is a toggle already, let's use that one
         } else {
           var toggleEl = opts.customToggle.replace("#", "");
 
@@ -278,75 +355,225 @@
         }
       },
 
+      /**
+       * Attaches event listeners to all sub-navigation toggles
+       */
+      _createDropdowns: function () {
+        var self = this;
+
+        // If getElementsByClassName is supported
+        if (elemsByClassName) {
+          dropdownToggle = nav.getElementsByClassName("dropdown-toggle");
+
+        // If not, use polyfill version (on old IEs)
+        } else {
+          dropdownToggle = document.getElementsByClassName("dropdown-toggle");
+        }
+
+        forEach(dropdownToggle, function (i, el) {
+          addEvent(el, "touchstart", self, false);
+          addEvent(el, "touchend", self, false);
+          addEvent(el, "mouseup", self, false);
+          addEvent(el, "keyup", self, false);
+          addEvent(el, "click", self, false);
+        });
+      },
+
+      /**
+       * Toggles sub-navigations open/closed
+       *
+       * @param  {element} The toggle that was tapped
+       */
+      _toggleDropdown: function (targetEl) {
+
+        // Enable active class to let the navigation expand over
+        // the calculated max height
+        addClass(nav, "dropdown-active");
+
+        // Check if the sub-navigation is inside another sub-nav
+        var parentEl = targetEl.parentNode,
+          isInsideSub = hasClass(parentEl.parentNode.parentNode, "dropdown");
+
+        // If it's already open, close it
+        if (hasClass(parentEl, "opened")) {
+          removeClass(parentEl, "opened");
+
+          // If not inside sub-navigation, we can reset the whole nav
+          if (!isInsideSub) removeClass(nav, "dropdown-active");
+
+        // navigation is closed, let's open it
+        } else {
+
+          // If it's inside sub-navigation
+          if (isInsideSub) {
+            forEach(getChildren(parentEl.parentNode), function (i, el) {
+              removeClass(el, "opened");
+            });
+            addClass(parentEl, "opened");
+
+          // Not inside another sub-nav
+          } else {
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
+            addClass(parentEl, "opened");
+          }
+        }
+
+        // Enable pointer events again
+        this._enablePointerEvents();
+      },
+
+      /**
+       * Closes the navigation when a link inside is clicked
+       */
       _closeOnNavClick: function () {
-        if (opts.closeOnNavClick && "querySelectorAll" in document) {
-          var links = nav.querySelectorAll("a"),
+        if (opts.closeOnNavClick) {
+          var links = nav.getElementsByTagName("a"),
             self = this;
           forEach(links, function (i, el) {
             addEvent(links[i], "click", function () {
-              if (isMobile) {
-                self.toggle();
-              }
+              if (isMobile) self.toggle();
             }, false);
           });
         }
       },
 
+      /**
+       * Prevents the default tap functionality
+       *
+       * @param  {event} event
+       */
       _preventDefault: function(e) {
+        // If you want dropdown links to be clickable on desktop remove comments:
+        /*if (!isMobile) return;*/
         if (e.preventDefault) {
+          if (e.stopImmediatePropagation) e.stopImmediatePropagation();
           e.preventDefault();
           e.stopPropagation();
+          return false;
+
+        // This is strictly for old IE
         } else {
           e.returnValue = false;
         }
       },
 
+      /**
+       * On touch start get the location of the touch
+       * and disable pointer events on the body.
+       *
+       * @param  {event} event
+       */
       _onTouchStart: function (e) {
-        e.stopPropagation();
-        if (opts.insert === "after") {
-          addClass(document.body, "disable-pointer-events");
-        }
+        this._preventDefault(e);
+        addClass(document.body, "disable-pointer-events");
         this.startX = e.touches[0].clientX;
         this.startY = e.touches[0].clientY;
         this.touchHasMoved = false;
-        removeEvent(navToggle, "mouseup", this, false);
+
+        /**
+         * We remove mouseup event completely here to avoid
+         * double triggering of events.
+         */
+        removeEvent(e.target, "mouseup", this, false);
       },
 
+      /**
+       * Check if the user is scrolling instead of tapping and
+       * re-enable pointer events if movement happed.
+       *
+       * @param  {event} event
+       */
       _onTouchMove: function (e) {
         if (Math.abs(e.touches[0].clientX - this.startX) > 10 ||
         Math.abs(e.touches[0].clientY - this.startY) > 10) {
+          this._enablePointerEvents();
           this.touchHasMoved = true;
         }
       },
 
+      /**
+       * On touch end toggle either the whole navigation or
+       * a sub-navigation depending on which one was tapped.
+       *
+       * @param  {event} event
+       */
       _onTouchEnd: function (e) {
         this._preventDefault(e);
+        if (!isMobile) return;
+
+        // Get event.target, the old IE way
+        var thisEvent = e || window.event,
+          targetEl = thisEvent.target || thisEvent.srcElement,
+          isDropdownTapped = false;
+
+        // Was it sub-navigation toggle or the main toggle?
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+
+        // If the user isn't scrolling
         if (!this.touchHasMoved) {
+
+          // If the event type is touch
           if (e.type === "touchend") {
-            this.toggle();
-            if (opts.insert === "after") {
-              setTimeout(function () {
-                removeClass(document.body, "disable-pointer-events");
-              }, opts.transition + 300);
+
+            // If sub-navigation toggle was tapped
+            if (isDropdownTapped) {
+              this._toggleDropdown(targetEl);
+
+            // If the main toggle was tapped
+            } else {
+              this.toggle();
             }
             return;
+
+          // Event type was click, not touch
           } else {
             var evt = e || window.event;
-            // If it isn't a right click
+
+            // If it isn't a right click, do toggling
             if (!(evt.which === 3 || evt.button === 2)) {
-              this.toggle();
+              if (isDropdownTapped) {
+                this._toggleDropdown(targetEl);
+              } else {
+                this.toggle();
+              }
             }
           }
         }
       },
 
+      /**
+       * For keyboard accessibility, toggle the navigation on Enter
+       * keypress too (also sub-navigation is keyboard accessible
+       * which explains the complexity here)
+       *
+       * @param  {event} event
+       */
       _onKeyUp: function (e) {
-        var evt = e || window.event;
-        if (evt.keyCode === 13) {
-          this.toggle();
+        var evt = e || window.event,
+          targetEl = e.target,
+          isDropdownTapped = false;
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+        if (evt.keyCode === 13) {
+          if (isDropdownTapped) {
+            this._toggleDropdown(targetEl);
+          } else {
+            this.toggle();
+          }
         }
       },
 
+      /**
+       * Enable pointer events
+       */
+      _enablePointerEvents: function () {
+        removeClass(document.body, "disable-pointer-events");
+      },
+
+      /**
+       * Adds the needed CSS transitions if animations are enabled
+       */
       _transitions: function () {
         if (opts.animate) {
           var objStyle = nav.style,
@@ -359,12 +586,18 @@
         }
       },
 
+      /**
+       * Calculates the height of the navigation and then creates
+       * styles which are later added to the page <head>
+       */
       _calcHeight: function () {
         var savedHeight = 0;
         for (var i = 0; i < nav.inner.length; i++) {
           savedHeight += nav.inner[i].offsetHeight;
         }
-        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important}";
+
+        // Pointer event styles are also here since they might only be confusing inside the stylesheet
+        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important} ." + opts.jsClass + " .disable-pointer-events{pointer-events:none !important} ." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened.dropdown-active {max-height:9999px !important}";
 
         if (styleElement.styleSheet) {
           styleElement.styleSheet.cssText = innerStyles;
@@ -377,6 +610,9 @@
 
     };
 
+    /**
+     * Return new Responsive Nav
+     */
     return new ResponsiveNav(el, options);
 
   };
diff --git a/client/src/styles/responsive-nav.css b/client/src/styles/responsive-nav.css
index 470d2d2..790f1b3 100644
--- a/client/src/styles/responsive-nav.css
+++ b/client/src/styles/responsive-nav.css
@@ -13,7 +13,8 @@
   display: block;
 }
 
-.js .nav-collapse {
+.js .nav-collapse,
+.js .nav-collapse .dropdown ul {
   clip: rect(0 0 0 0);
   max-height: 0;
   position: absolute;
@@ -22,15 +23,18 @@
   zoom: 1;
 }
 
-.nav-collapse.opened {
+.nav-collapse.opened,
+.nav-collapse .dropdown.opened ul {
   max-height: 9999px;
 }
 
-.disable-pointer-events {
-  pointer-events: none !important;
+.nav-collapse .dropdown.opened > ul,
+.nav-collapse .dropdown .dropdown.opened > ul {
+  position: relative;
 }
 
-.nav-toggle {
+.nav-toggle,
+.dropdown-toggle {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -44,7 +48,8 @@
   .js .nav-collapse {
     position: relative;
   }
-  .js .nav-collapse.closed {
+  .js .nav-collapse.closed,
+  .js .nav-collapse.closed .dropdown ul {
     max-height: none;
   }
   .nav-toggle {
diff --git a/client/test/responsive-nav.spec.js b/client/test/responsive-nav.spec.js
index 803cd43..b5555ec 100644
--- a/client/test/responsive-nav.spec.js
+++ b/client/test/responsive-nav.spec.js
@@ -45,7 +45,7 @@ describe("responsive-nav", function () {
       insertNav();
       var styleEl = document.getElementsByTagName("style")[0],
         styleContents = styleEl.innerHTML || styleEl.styleSheet.cssText.replace(/\s+/g, "").replace(/\;/g, "");
-      expect(styleContents.replace(/\.opened/g, "")).toBe(".js .nav-collapse-0{max-height:16px !important}");
+      expect(styleContents.replace(/\.opened/g, "")).toBe(".js .nav-collapse-0{max-height:16px !important} .js .disable-pointer-events{pointer-events:none !important} .js .nav-collapse-0.dropdown-active {max-height:9999px !important}");
       nav.destroy();
     });
 
@@ -112,7 +112,7 @@ describe("responsive-nav", function () {
       insertNav();
       var styleEl = document.getElementsByTagName("style")[0],
         styleContents = styleEl.innerHTML || styleEl.styleSheet.cssText.replace(/\s+/g, "").replace(/\;/g, "");
-      expect(styleContents.replace(/\.opened/g, "")).toBe(".js .nav-collapse-7{max-height:50px !important}");
+      expect(styleContents.replace(/\.opened/g, "")).toBe(".js .nav-collapse-7{max-height:50px !important} .js .disable-pointer-events{pointer-events:none !important} .js .nav-collapse-7.dropdown-active {max-height:9999px !important}");
       nav.destroy();
     });
 
diff --git a/demos/icons/responsivenav.eot b/demos/icons/responsivenav.eot
new file mode 100755
index 0000000..16b547e
Binary files /dev/null and b/demos/icons/responsivenav.eot differ
diff --git a/demos/icons/responsivenav.svg b/demos/icons/responsivenav.svg
new file mode 100755
index 0000000..e59f68f
--- /dev/null
+++ b/demos/icons/responsivenav.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="responsivenav" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#x78;" d="M443.904 366.016c6.24-6.208 6.24-16.416 0-22.624l-124.448-124.512c-6.176-6.208-6.176-16.416 0-22.656l124.384-124.544c6.24-6.208 6.24-16.416 0-22.624l-45.312-45.216c-6.176-6.208-16.384-6.208-22.624 0l-124.32 124.544c-6.208 6.208-16.416 6.208-22.624 0l-124.448-124.448c-6.208-6.24-16.416-6.24-22.624 0l-45.248 45.312c-6.208 6.176-6.208 16.384 0 22.624l124.48 124.448c6.208 6.208 6.208 16.416 0 22.656l-124.384 124.512c-6.208 6.24-6.208 16.416 0 22.624l45.28 45.248c6.208 6.208 16.416 6.208 22.624 0l124.32-124.512c6.208-6.24 16.416-6.24 22.624-0.032l124.416 124.48c6.24 6.176 16.448 6.176 22.624 0l45.28-45.28z" />
+<glyph unicode="&#x2261;" d="M438.857 91.428v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 237.714v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 384v-36.572q0-7.428-5.428-12.857t-12.857-5.429h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.571q0 7.429 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/demos/icons/responsivenav.ttf b/demos/icons/responsivenav.ttf
new file mode 100755
index 0000000..9da6226
Binary files /dev/null and b/demos/icons/responsivenav.ttf differ
diff --git a/demos/icons/responsivenav.woff b/demos/icons/responsivenav.woff
new file mode 100755
index 0000000..1b7f4f2
Binary files /dev/null and b/demos/icons/responsivenav.woff differ
diff --git a/demos/multiple-levels/index.html b/demos/multiple-levels/index.html
new file mode 100644
index 0000000..0f2edfe
--- /dev/null
+++ b/demos/multiple-levels/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Responsive Nav &middot; Multiple Levels Demo</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="../../responsive-nav.css">
+    <link rel="stylesheet" href="styles.css">
+    <script src="../../responsive-nav.js"></script>
+  </head>
+  <body>
+
+    <div class="header">
+      <a href="index.html" class="logo">Responsive Nav</a>
+      <div class="nav-collapse" id="nav">
+        <ul>
+          <li>
+            <a href="subpage.html">A link</a>
+          </li>
+          <li class="dropdown">
+            <a href="section.html" class="dropdown-toggle">A link</a>
+            <ul>
+              <li><a href="subpage.html">Sub link</a></li>
+              <li class="dropdown">
+                <a href="subpage.html" class="dropdown-toggle">Sub link</a>
+                <ul>
+                  <li><a href="subpage.html">Deep link</a></li>
+                  <li><a href="subpage.html">Deep link</a></li>
+                  <li><a href="subpage.html">Deep link</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a href="subpage.html" class="dropdown-toggle">Sub link</a>
+                <ul>
+                  <li><a href="subpage.html">Deep link</a></li>
+                  <li><a href="subpage.html">Deep link</a></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li class="dropdown">
+            <a href="section.html" class="dropdown-toggle">A link</a>
+            <ul>
+              <li><a href="subpage.html">Sub link</a></li>
+              <li><a href="subpage.html">Sub link</a></li>
+            </ul>
+          </li>
+          <li class="dropdown">
+            <a href="section.html" class="dropdown-toggle">A link</a>
+            <ul>
+              <li><a href="subpage.html">Sub link</a></li>
+              <li><a href="subpage.html">Sub link</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <script>
+      // Init responsive nav
+      var navigation = responsiveNav("#nav");
+    </script>
+
+  </body>
+</html>
diff --git a/demos/multiple-levels/styles.css b/demos/multiple-levels/styles.css
new file mode 100644
index 0000000..a410d9c
--- /dev/null
+++ b/demos/multiple-levels/styles.css
@@ -0,0 +1,304 @@
+@charset "UTF-8";
+
+/* ------------------------------------------
+  RESET
+--------------------------------------------- */
+
+body, div,
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
+fieldset, form, label, legend, th, td,
+article, aside, figure, footer, header, hgroup, menu, nav, section,
+summary, hgroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+@-webkit-viewport { width: device-width; }
+@-moz-viewport { width: device-width; }
+@-ms-viewport { width: device-width; }
+@-o-viewport { width: device-width; }
+@viewport { width: device-width; }
+
+
+/* ------------------------------------------
+  BASE DEMO STYLES
+--------------------------------------------- */
+
+body {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  color: #37302a;
+  background: #fff;
+  font: normal 100%/1.4 sans-serif;
+}
+
+section {
+  border-bottom: 1px solid #999;
+  float: left;
+  width: 100%;
+  height: 800px;
+}
+
+/* ------------------------------------------
+  HEADER
+--------------------------------------------- */
+
+.header {
+  background: #f4421a;
+  height: 3.5em;
+  float: left;
+  width: 100%;
+}
+
+.logo {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  text-decoration: none;
+  font-weight: bold;
+  line-height: 55px;
+  padding: 0 20px;
+  color: #fff;
+  float: left;
+}
+
+
+/* ------------------------------------------
+  NAVIGATION STYLES
+  (+ responsive-nav.css file is loaded in the <head>)
+--------------------------------------------- */
+
+.nav-collapse,
+.nav-collapse * {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.nav-collapse {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.nav-collapse,
+.nav-collapse ul {
+  list-style: none;
+  width: 100%;
+  float: left;
+}
+
+@media screen and (min-width: 40em) {
+  .nav-collapse {
+    width: auto;
+    float: right;
+  }
+}
+
+.nav-collapse > ul {
+  border-top: 1px solid rgba(0,0,0, .15);
+}
+
+.nav-collapse li {
+  float: left;
+  width: 100%;
+}
+
+@media screen and (min-width: 40em) {
+  .nav-collapse li {
+    width: auto;
+  }
+}
+
+.nav-collapse a {
+  color: #fff;
+  text-decoration: none;
+  width: 100%;
+  background: #f4421a;
+  border-bottom: 1px solid rgba(0,0,0, .15);
+  padding: 0.7em 1em;
+  float: left;
+}
+
+.nav-collapse a:active {
+  color: rgba(255,255,255, .5);
+}
+
+@media screen and (min-width: 40em) {
+  .nav-collapse a {
+    margin: 0;
+    padding: 1em 1.5em;
+    float: left;
+    text-align: center;
+    border-bottom: 0;
+    border-right: 1px solid white;
+  }
+  .nav-collapse li:last-child a {
+    border: 0;
+  }
+}
+
+
+/* ------------------------------------------
+  NAV TOGGLE STYLES
+--------------------------------------------- */
+
+@font-face {
+  font-family: "responsivenav";
+  src:url("../icons/responsivenav.eot");
+  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
+    url("../icons/responsivenav.ttf") format("truetype"),
+    url("../icons/responsivenav.woff") format("woff"),
+    url("../icons/responsivenav.svg#responsivenav") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.nav-toggle {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-decoration: none;
+  text-indent: -999px;
+  position: relative;
+  overflow: hidden;
+  width: 70px;
+  height: 55px;
+  float: right;
+}
+
+.nav-toggle:before {
+  color: #fff;
+  font-family: "responsivenav", sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  font-size: 28px;
+  text-transform: none;
+  position: absolute;
+  content: "≡";
+  text-indent: 0;
+  text-align: center;
+  line-height: 55px;
+  speak: none;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+
+.nav-toggle.active::before {
+  font-size: 24px;
+  content:"x";
+}
+
+/* ------------------------------------------
+  MULTIPLE LEVELS
+--------------------------------------------- */
+
+.dropdown ul a {
+  background: #b63315;
+  padding-left: 1.5em;
+}
+
+.dropdown ul ul a {
+  background: #81230e;
+  padding-left: 2.5em;
+}
+
+@media screen and (min-width: 40em) {
+  .js .nav-collapse .dropdown ul {
+    display: none;
+  }
+}
+
+.dropdown ul {
+  background: #b63315;
+}
+
+.dropdown ul ul {
+  border: 0;
+  padding: 0;
+}
+
+.dropdown .dropdown.opened .dropdown-toggle {
+  background: #9c2c12;
+}
+
+.dropdown-toggle:after {
+  content: "+";
+  font-size: 1.5em;
+  line-height: 0.8;
+  float: right;
+}
+
+.dropdown.opened > .dropdown-toggle:after {
+  content: "–";
+}
+
+@media screen and (min-width: 40em) {
+  .js .nav-collapse,
+  .js .nav-collapse .dropdown ul {
+    max-height: none;
+    overflow: visible;
+  }
+  .dropdown-toggle:after {
+    content: "";
+    width: 0;
+    height: 0;
+    margin: 0.3em 0 0 0.5em;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #fff;
+  }
+  .dropdown ul .dropdown-toggle:after {
+    content: "";
+    width: 0;
+    height: 0;
+    margin: 0.3em 0 0 0.5em;
+    border-bottom: 6px solid transparent;
+    border-top: 6px solid transparent;
+    border-left: 6px solid #fff;
+  }
+  .nav-collapse a:hover {
+    color: rgba(255,255,255, .7);
+  }
+  .nav-collapse .dropdown {
+    position: relative;
+  }
+  .nav-collapse .dropdown li {
+    width: 100%;
+  }
+  .nav-collapse .dropdown ul a {
+    text-align: left;
+    border: 0;
+  }
+  .js .nav-collapse .dropdown:hover > ul {
+    clip: auto;
+    position: absolute;
+    width: 10em;
+    top: 3.4em;
+    left: 0;
+    display: block !important;
+  }
+  .js .nav-collapse .dropdown .dropdown:hover > ul {
+    top: 0;
+    left: 10em;
+  }
+  .js .nav-collapse ul > .dropdown:last-child ul {
+    left: auto;
+    right: 0;
+  }
+}
+
diff --git a/demos/open-navigation-below/index.html b/demos/open-navigation-below/index.html
deleted file mode 100644
index 14aa896..0000000
--- a/demos/open-navigation-below/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Responsive Nav &middot; Open Navigation Below Demo</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="stylesheet" href="../../responsive-nav.css">
-    <script src="../../responsive-nav.js"></script>
-  </head>
-  <body>
-
-    <nav class="nav-collapse">
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Blog</a></li>
-      </ul>
-    </nav>
-
-    <script>
-      var navigation = responsiveNav(".nav-collapse", {
-        insert: "before"
-      });
-    </script>
-
-  </body>
-</html>
diff --git a/package.json b/package.json
index a655078..d1a7b18 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "responsive-nav",
-  "version": "1.0.32",
+  "version": "1.0.40",
   "description": "Responsive Nav JS plugin",
   "main": "index.js",
   "scripts": {
diff --git a/responsive-nav.css b/responsive-nav.css
index d0ac2e2..33bc105 100644
--- a/responsive-nav.css
+++ b/responsive-nav.css
@@ -1,4 +1,4 @@
-/*! responsive-nav.js 1.0.32 by @viljamis */
+/*! responsive-nav.js 1.0.40 by @viljamis */
 
 .nav-collapse ul {
   margin: 0;
@@ -13,7 +13,8 @@
   display: block;
 }
 
-.js .nav-collapse {
+.js .nav-collapse,
+.js .nav-collapse .dropdown ul {
   clip: rect(0 0 0 0);
   max-height: 0;
   position: absolute;
@@ -22,15 +23,18 @@
   zoom: 1;
 }
 
-.nav-collapse.opened {
+.nav-collapse.opened,
+.nav-collapse .dropdown.opened ul {
   max-height: 9999px;
 }
 
-.disable-pointer-events {
-  pointer-events: none !important;
+.nav-collapse .dropdown.opened > ul,
+.nav-collapse .dropdown .dropdown.opened > ul {
+  position: relative;
 }
 
-.nav-toggle {
+.nav-toggle,
+.dropdown-toggle {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -44,7 +48,8 @@
   .js .nav-collapse {
     position: relative;
   }
-  .js .nav-collapse.closed {
+  .js .nav-collapse.closed,
+  .js .nav-collapse.closed .dropdown ul {
     max-height: none;
   }
   .nav-toggle {
diff --git a/responsive-nav.js b/responsive-nav.js
index 6336d3c..abe520a 100644
--- a/responsive-nav.js
+++ b/responsive-nav.js
@@ -1,4 +1,4 @@
-/*! responsive-nav.js 1.0.32
+/*! responsive-nav.js 1.0.40
  * https://github.com/viljamis/responsive-nav.js
  * http://responsive-nav.com
  *
@@ -7,18 +7,22 @@
  */
 
 (function (document, window, index) {
+  // Index is used to keep multiple navs on the same page namespaced
 
   "use strict";
 
   var responsiveNav = function (el, options) {
 
     var computed = !!window.getComputedStyle;
+    var elemsByClassName = !!document.getElementsByClassName;
     
-    // getComputedStyle polyfill
+    /**
+     * getComputedStyle polyfill for old browsers
+     */
     if (!computed) {
-      window.getComputedStyle = function(el) {
+      window.getComputedStyle = function (el) {
         this.el = el;
-        this.getPropertyValue = function(prop) {
+        this.getPropertyValue = function (prop) {
           var re = /(\-([a-z]){1})/g;
           if (prop === "float") {
             prop = "styleFloat";
@@ -33,9 +37,37 @@
         return this;
       };
     }
-    /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */
-    // fn arg can be an object or a function, thanks to handleEvent
-    // read more at: http://www.thecssninja.com/javascript/handleevent
+    
+    /**
+     * GetElementsByClassName polyfill for old browsers
+     */
+    if (!elemsByClassName) {
+      document.getElementsByClassName = function (match) {
+        var result = [],
+          elements = document.getElementsByTagName("*"),
+          i, elem;
+        match = " " + match + " ";
+        for (i = 0; i < elements.length; i++) {
+          elem = elements[i];
+          if ((" " + (elem.className || elem.getAttribute("class")) + " ").indexOf(match) > -1) {
+            result.push(elem);
+          }
+        }
+        return result;
+      };
+    }
+    /* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, hasClass, forEach */
+    
+    /**
+     * Add Event
+     * fn arg can be an object or a function, thanks to handleEvent
+     * read more at: http://www.thecssninja.com/javascript/handleevent
+     *
+     * @param  {element}  element
+     * @param  {event}    event
+     * @param  {Function} fn
+     * @param  {boolean}  bubbling
+     */
     var addEvent = function (el, evt, fn, bubble) {
         if ("addEventListener" in el) {
           // BBOS6 doesn't support handleEvent, catch and polyfill
@@ -64,6 +96,14 @@
         }
       },
     
+      /**
+       * Remove Event
+       *
+       * @param  {element}  element
+       * @param  {event}    event
+       * @param  {Function} fn
+       * @param  {boolean}  bubbling
+       */
       removeEvent = function (el, evt, fn, bubble) {
         if ("removeEventListener" in el) {
           try {
@@ -88,6 +128,12 @@
         }
       },
     
+      /**
+       * Get the children of any element
+       *
+       * @param  {element}
+       * @return {array} Returns matching elements in an array
+       */
       getChildren = function (e) {
         if (e.children.length < 1) {
           throw new Error("The Nav container has no containing elements");
@@ -103,25 +149,60 @@
         return children;
       },
     
+      /**
+       * Sets multiple attributes at once
+       *
+       * @param {element} element
+       * @param {attrs}   attrs
+       */
       setAttributes = function (el, attrs) {
         for (var key in attrs) {
           el.setAttribute(key, attrs[key]);
         }
       },
     
+      /**
+       * Adds a class to any element
+       *
+       * @param {element} element
+       * @param {string}  class
+       */
       addClass = function (el, cls) {
-        if (el.className.indexOf(cls) !== 0) {
+        if (!hasClass(el, cls)) {
           el.className += " " + cls;
           el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");
         }
       },
     
+      /**
+       * Remove a class from any element
+       *
+       * @param  {element} element
+       * @param  {string}  class
+       */
       removeClass = function (el, cls) {
         var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
         el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
       },
     
-      // forEach method that passes back the stuff we need
+      /**
+       * Checks if an element has certain class
+       *
+       * @param  {element}  element
+       * @param  {string}   class name
+       * @return {Boolean}
+       */
+      hasClass = function (el, cls) {
+        return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
+      },
+    
+      /**
+       * forEach method that passes back the stuff we need
+       *
+       * @param  {array}    array
+       * @param  {Function} callback
+       * @param  {scope}    scope
+       */
       forEach = function (array, callback, scope) {
         for (var i = 0; i < array.length; i++) {
           callback.call(scope, i, array[i]);
@@ -131,6 +212,7 @@
     var nav,
       opts,
       navToggle,
+      dropdownToggle,
       styleElement = document.createElement("style"),
       htmlEl = document.documentElement,
       hasAnimFinished,
@@ -140,7 +222,11 @@
     var ResponsiveNav = function (el, options) {
         var i;
 
-        // Default options
+
+        /**
+         * Default options
+         * @type {Object}
+         */
         this.options = {
           animate: true,                    // Boolean: Use CSS3 transitions, true or false
           transition: 284,                  // Integer: Speed of the transition, in milliseconds
@@ -194,7 +280,9 @@
 
     ResponsiveNav.prototype = {
 
-      // Public methods
+      /**
+       * Unattaches events and removes any classes that were added
+       */
       destroy: function () {
         this._removeStyles();
         removeClass(nav, "closed");
@@ -213,6 +301,15 @@
         removeEvent(navToggle, "keyup", this, false);
         removeEvent(navToggle, "click", this, false);
 
+        var self = this;
+        forEach(dropdownToggle, function (i, el) {
+          removeEvent(el, "touchstart", self, false);
+          removeEvent(el, "touchend", self, false);
+          removeEvent(el, "mouseup", self, false);
+          removeEvent(el, "keyup", self, false);
+          removeEvent(el, "click", self, false);
+        });
+
         if (!opts.customToggle) {
           navToggle.parentNode.removeChild(navToggle);
         } else {
@@ -220,6 +317,9 @@
         }
       },
 
+      /**
+       * Toggles the navigation open/close
+       */
       toggle: function () {
         if (hasAnimFinished === true) {
           if (!navOpen) {
@@ -227,9 +327,15 @@
           } else {
             this.close();
           }
+
+          // Enable pointer events again
+          this._enablePointerEvents();
         }
       },
 
+      /**
+       * Opens the navigation
+       */
       open: function () {
         if (!navOpen) {
           removeClass(nav, "closed");
@@ -243,6 +349,9 @@
         }
       },
 
+      /**
+       * Closes the navigation
+       */
       close: function () {
         if (navOpen) {
           addClass(nav, "closed");
@@ -251,14 +360,25 @@
           removeClass(navToggle, "active");
           setAttributes(nav, {"aria-hidden": "true"});
 
+          // If animations are enabled, wait until they finish
           if (opts.animate) {
             hasAnimFinished = false;
             setTimeout(function () {
               nav.style.position = "absolute";
               hasAnimFinished = true;
+              removeClass(nav, "dropdown-active");
+              forEach(dropdownToggle, function (i, el) {
+                removeClass(el.parentNode, "opened");
+              });
             }, opts.transition + 10);
+
+          // Animations aren't enabled, we can do these immediately
           } else {
             nav.style.position = "absolute";
+            removeClass(nav, "dropdown-active");
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
           }
 
           navOpen = false;
@@ -266,7 +386,13 @@
         }
       },
 
+      /**
+       * Resize is called on window resize and orientation change.
+       * It initializes the CSS styles and height calculations.
+       */
       resize: function () {
+
+        // Resize watches navigation toggle's display state
         if (window.getComputedStyle(navToggle, null).getPropertyValue("display") !== "none") {
 
           isMobile = true;
@@ -286,10 +412,20 @@
           setAttributes(navToggle, {"aria-hidden": "true"});
           setAttributes(nav, {"aria-hidden": "false"});
           nav.style.position = opts.openPos;
+          removeClass(nav, "dropdown-active");
+          forEach(dropdownToggle, function (i, el) {
+            removeClass(el.parentNode, "opened");
+          });
           this._removeStyles();
         }
       },
 
+      /**
+       * Takes care of all even handling
+       *
+       * @param  {event} event
+       * @return {type} returns the type of event that should be used
+       */
       handleEvent: function (e) {
         var evt = e || window.event;
 
@@ -316,7 +452,9 @@
         }
       },
 
-      // Private methods
+      /**
+       * Initializes the widget
+       */
       _init: function () {
         this.index = index++;
 
@@ -328,10 +466,15 @@
 
         this._closeOnNavClick();
         this._createToggle();
+        this._createDropdowns();
         this._transitions();
         this.resize();
 
-        // IE8 hack
+        /**
+         * On IE8 the resize event triggers too early for some reason
+         * so it's called here again on init to make sure all the
+         * calculated styles are correct.
+         */
         var self = this;
         setTimeout(function () {
           self.resize();
@@ -345,10 +488,15 @@
         addEvent(navToggle, "keyup", this, false);
         addEvent(navToggle, "click", this, false);
 
-        // Init callback
+        /**
+         * Init callback here
+         */
         opts.init();
       },
 
+      /**
+       * Creates Styles to the <head>
+       */
       _createStyles: function () {
         if (!styleElement.parentNode) {
           styleElement.type = "text/css";
@@ -356,13 +504,19 @@
         }
       },
 
+      /**
+       * Removes styles from the <head>
+       */
       _removeStyles: function () {
-        if (styleElement.parentNode) {
-          styleElement.parentNode.removeChild(styleElement);
-        }
+        if (styleElement.parentNode) styleElement.parentNode.removeChild(styleElement);
       },
 
+      /**
+       * Creates Navigation Toggle
+       */
       _createToggle: function () {
+
+        // If there's no toggle, let's create one
         if (!opts.customToggle) {
           var toggle = document.createElement("a");
           toggle.innerHTML = opts.label;
@@ -371,6 +525,7 @@
             "class": "nav-toggle"
           });
 
+          // Determine where to insert the toggle
           if (opts.insert === "after") {
             nav.parentNode.insertBefore(toggle, nav.nextSibling);
           } else {
@@ -378,6 +533,8 @@
           }
 
           navToggle = toggle;
+
+        // There is a toggle already, let's use that one
         } else {
           var toggleEl = opts.customToggle.replace("#", "");
 
@@ -391,75 +548,225 @@
         }
       },
 
+      /**
+       * Attaches event listeners to all sub-navigation toggles
+       */
+      _createDropdowns: function () {
+        var self = this;
+
+        // If getElementsByClassName is supported
+        if (elemsByClassName) {
+          dropdownToggle = nav.getElementsByClassName("dropdown-toggle");
+
+        // If not, use polyfill version (on old IEs)
+        } else {
+          dropdownToggle = document.getElementsByClassName("dropdown-toggle");
+        }
+
+        forEach(dropdownToggle, function (i, el) {
+          addEvent(el, "touchstart", self, false);
+          addEvent(el, "touchend", self, false);
+          addEvent(el, "mouseup", self, false);
+          addEvent(el, "keyup", self, false);
+          addEvent(el, "click", self, false);
+        });
+      },
+
+      /**
+       * Toggles sub-navigations open/closed
+       *
+       * @param  {element} The toggle that was tapped
+       */
+      _toggleDropdown: function (targetEl) {
+
+        // Enable active class to let the navigation expand over
+        // the calculated max height
+        addClass(nav, "dropdown-active");
+
+        // Check if the sub-navigation is inside another sub-nav
+        var parentEl = targetEl.parentNode,
+          isInsideSub = hasClass(parentEl.parentNode.parentNode, "dropdown");
+
+        // If it's already open, close it
+        if (hasClass(parentEl, "opened")) {
+          removeClass(parentEl, "opened");
+
+          // If not inside sub-navigation, we can reset the whole nav
+          if (!isInsideSub) removeClass(nav, "dropdown-active");
+
+        // navigation is closed, let's open it
+        } else {
+
+          // If it's inside sub-navigation
+          if (isInsideSub) {
+            forEach(getChildren(parentEl.parentNode), function (i, el) {
+              removeClass(el, "opened");
+            });
+            addClass(parentEl, "opened");
+
+          // Not inside another sub-nav
+          } else {
+            forEach(dropdownToggle, function (i, el) {
+              removeClass(el.parentNode, "opened");
+            });
+            addClass(parentEl, "opened");
+          }
+        }
+
+        // Enable pointer events again
+        this._enablePointerEvents();
+      },
+
+      /**
+       * Closes the navigation when a link inside is clicked
+       */
       _closeOnNavClick: function () {
-        if (opts.closeOnNavClick && "querySelectorAll" in document) {
-          var links = nav.querySelectorAll("a"),
+        if (opts.closeOnNavClick) {
+          var links = nav.getElementsByTagName("a"),
             self = this;
           forEach(links, function (i, el) {
             addEvent(links[i], "click", function () {
-              if (isMobile) {
-                self.toggle();
-              }
+              if (isMobile) self.toggle();
             }, false);
           });
         }
       },
 
+      /**
+       * Prevents the default tap functionality
+       *
+       * @param  {event} event
+       */
       _preventDefault: function(e) {
+        // If you want dropdown links to be clickable on desktop remove comments:
+        /*if (!isMobile) return;*/
         if (e.preventDefault) {
+          if (e.stopImmediatePropagation) e.stopImmediatePropagation();
           e.preventDefault();
           e.stopPropagation();
+          return false;
+
+        // This is strictly for old IE
         } else {
           e.returnValue = false;
         }
       },
 
+      /**
+       * On touch start get the location of the touch
+       * and disable pointer events on the body.
+       *
+       * @param  {event} event
+       */
       _onTouchStart: function (e) {
-        e.stopPropagation();
-        if (opts.insert === "after") {
-          addClass(document.body, "disable-pointer-events");
-        }
+        this._preventDefault(e);
+        addClass(document.body, "disable-pointer-events");
         this.startX = e.touches[0].clientX;
         this.startY = e.touches[0].clientY;
         this.touchHasMoved = false;
-        removeEvent(navToggle, "mouseup", this, false);
+
+        /**
+         * We remove mouseup event completely here to avoid
+         * double triggering of events.
+         */
+        removeEvent(e.target, "mouseup", this, false);
       },
 
+      /**
+       * Check if the user is scrolling instead of tapping and
+       * re-enable pointer events if movement happed.
+       *
+       * @param  {event} event
+       */
       _onTouchMove: function (e) {
         if (Math.abs(e.touches[0].clientX - this.startX) > 10 ||
         Math.abs(e.touches[0].clientY - this.startY) > 10) {
+          this._enablePointerEvents();
           this.touchHasMoved = true;
         }
       },
 
+      /**
+       * On touch end toggle either the whole navigation or
+       * a sub-navigation depending on which one was tapped.
+       *
+       * @param  {event} event
+       */
       _onTouchEnd: function (e) {
         this._preventDefault(e);
+        if (!isMobile) return;
+
+        // Get event.target, the old IE way
+        var thisEvent = e || window.event,
+          targetEl = thisEvent.target || thisEvent.srcElement,
+          isDropdownTapped = false;
+
+        // Was it sub-navigation toggle or the main toggle?
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+
+        // If the user isn't scrolling
         if (!this.touchHasMoved) {
+
+          // If the event type is touch
           if (e.type === "touchend") {
-            this.toggle();
-            if (opts.insert === "after") {
-              setTimeout(function () {
-                removeClass(document.body, "disable-pointer-events");
-              }, opts.transition + 300);
+
+            // If sub-navigation toggle was tapped
+            if (isDropdownTapped) {
+              this._toggleDropdown(targetEl);
+
+            // If the main toggle was tapped
+            } else {
+              this.toggle();
             }
             return;
+
+          // Event type was click, not touch
           } else {
             var evt = e || window.event;
-            // If it isn't a right click
+
+            // If it isn't a right click, do toggling
             if (!(evt.which === 3 || evt.button === 2)) {
-              this.toggle();
+              if (isDropdownTapped) {
+                this._toggleDropdown(targetEl);
+              } else {
+                this.toggle();
+              }
             }
           }
         }
       },
 
+      /**
+       * For keyboard accessibility, toggle the navigation on Enter
+       * keypress too (also sub-navigation is keyboard accessible
+       * which explains the complexity here)
+       *
+       * @param  {event} event
+       */
       _onKeyUp: function (e) {
-        var evt = e || window.event;
-        if (evt.keyCode === 13) {
-          this.toggle();
+        var evt = e || window.event,
+          targetEl = e.target,
+          isDropdownTapped = false;
+        if (hasClass(targetEl, "dropdown-toggle")) isDropdownTapped = true;
+        if (evt.keyCode === 13) {
+          if (isDropdownTapped) {
+            this._toggleDropdown(targetEl);
+          } else {
+            this.toggle();
+          }
         }
       },
 
+      /**
+       * Enable pointer events
+       */
+      _enablePointerEvents: function () {
+        removeClass(document.body, "disable-pointer-events");
+      },
+
+      /**
+       * Adds the needed CSS transitions if animations are enabled
+       */
       _transitions: function () {
         if (opts.animate) {
           var objStyle = nav.style,
@@ -472,12 +779,18 @@
         }
       },
 
+      /**
+       * Calculates the height of the navigation and then creates
+       * styles which are later added to the page <head>
+       */
       _calcHeight: function () {
         var savedHeight = 0;
         for (var i = 0; i < nav.inner.length; i++) {
           savedHeight += nav.inner[i].offsetHeight;
         }
-        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important}";
+
+        // Pointer event styles are also here since they might only be confusing inside the stylesheet
+        var innerStyles = "." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened{max-height:" + savedHeight + "px !important} ." + opts.jsClass + " .disable-pointer-events{pointer-events:none !important} ." + opts.jsClass + " ." + opts.navClass + "-" + this.index + ".opened.dropdown-active {max-height:9999px !important}";
 
         if (styleElement.styleSheet) {
           styleElement.styleSheet.cssText = innerStyles;
@@ -490,6 +803,9 @@
 
     };
 
+    /**
+     * Return new Responsive Nav
+     */
     return new ResponsiveNav(el, options);
 
   };
diff --git a/responsive-nav.min.js b/responsive-nav.min.js
index 714c165..8f8afdc 100644
--- a/responsive-nav.min.js
+++ b/responsive-nav.min.js
@@ -1 +1 @@
-!function(a,b,c){"use strict";var d=function(d,e){var f=!!b.getComputedStyle;f||(b.getComputedStyle=function(a){return this.el=a,this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;return"float"===b&&(b="styleFloat"),c.test(b)&&(b=b.replace(c,function(){return arguments[2].toUpperCase()})),a.currentStyle[b]?a.currentStyle[b]:null},this});var g,h,i,j,k,l,m=function(a,b,c,d){if("addEventListener"in a)try{a.addEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.addEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"attachEvent"in a&&("object"==typeof c&&c.handleEvent?a.attachEvent("on"+b,function(){c.handleEvent.call(c)}):a.attachEvent("on"+b,c))},n=function(a,b,c,d){if("removeEventListener"in a)try{a.removeEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.removeEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"detachEvent"in a&&("object"==typeof c&&c.handleEvent?a.detachEvent("on"+b,function(){c.handleEvent.call(c)}):a.detachEvent("on"+b,c))},o=function(a){if(a.children.length<1)throw new Error("The Nav container has no containing elements");for(var b=[],c=0;c<a.children.length;c++)1===a.children[c].nodeType&&b.push(a.children[c]);return b},p=function(a,b){for(var c in b)a.setAttribute(c,b[c])},q=function(a,b){0!==a.className.indexOf(b)&&(a.className+=" "+b,a.className=a.className.replace(/(^\s*)|(\s*$)/g,""))},r=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ").replace(/(^\s*)|(\s*$)/g,"")},s=function(a,b,c){for(var d=0;d<a.length;d++)b.call(c,d,a[d])},t=a.createElement("style"),u=a.documentElement,v=function(b,c){var d;this.options={animate:!0,transition:284,label:"Menu",insert:"before",customToggle:"",closeOnNavClick:!1,openPos:"relative",navClass:"nav-collapse",navActiveClass:"js-nav-active",jsClass:"js",init:function(){},open:function(){},close:function(){}};for(d in c)this.options[d]=c[d];if(q(u,this.options.jsClass),this.wrapperEl=b.replace("#",""),a.getElementById(this.wrapperEl))this.wrapper=a.getElementById(this.wrapperEl);else{if(!a.querySelector(this.wrapperEl))throw new Error("The nav element you are trying to select doesn't exist");this.wrapper=a.querySelector(this.wrapperEl)}this.wrapper.inner=o(this.wrapper),h=this.options,g=this.wrapper,this._init(this)};return v.prototype={destroy:function(){this._removeStyles(),r(g,"closed"),r(g,"opened"),r(g,h.navClass),r(g,h.navClass+"-"+this.index),r(u,h.navActiveClass),g.removeAttribute("style"),g.removeAttribute("aria-hidden"),n(b,"resize",this,!1),n(a.body,"touchmove",this,!1),n(i,"touchstart",this,!1),n(i,"touchend",this,!1),n(i,"mouseup",this,!1),n(i,"keyup",this,!1),n(i,"click",this,!1),h.customToggle?i.removeAttribute("aria-hidden"):i.parentNode.removeChild(i)},toggle:function(){j===!0&&(l?this.close():this.open())},open:function(){l||(r(g,"closed"),q(g,"opened"),q(u,h.navActiveClass),q(i,"active"),g.style.position=h.openPos,p(g,{"aria-hidden":"false"}),l=!0,h.open())},close:function(){l&&(q(g,"closed"),r(g,"opened"),r(u,h.navActiveClass),r(i,"active"),p(g,{"aria-hidden":"true"}),h.animate?(j=!1,setTimeout(function(){g.style.position="absolute",j=!0},h.transition+10)):g.style.position="absolute",l=!1,h.close())},resize:function(){"none"!==b.getComputedStyle(i,null).getPropertyValue("display")?(k=!0,p(i,{"aria-hidden":"false"}),g.className.match(/(^|\s)closed(\s|$)/)&&(p(g,{"aria-hidden":"true"}),g.style.position="absolute"),this._createStyles(),this._calcHeight()):(k=!1,p(i,{"aria-hidden":"true"}),p(g,{"aria-hidden":"false"}),g.style.position=h.openPos,this._removeStyles())},handleEvent:function(a){var c=a||b.event;switch(c.type){case"touchstart":this._onTouchStart(c);break;case"touchmove":this._onTouchMove(c);break;case"touchend":case"mouseup":this._onTouchEnd(c);break;case"click":this._preventDefault(c);break;case"keyup":this._onKeyUp(c);break;case"resize":this.resize(c)}},_init:function(){this.index=c++,q(g,h.navClass),q(g,h.navClass+"-"+this.index),q(g,"closed"),j=!0,l=!1,this._closeOnNavClick(),this._createToggle(),this._transitions(),this.resize();var d=this;setTimeout(function(){d.resize()},20),m(b,"resize",this,!1),m(a.body,"touchmove",this,!1),m(i,"touchstart",this,!1),m(i,"touchend",this,!1),m(i,"mouseup",this,!1),m(i,"keyup",this,!1),m(i,"click",this,!1),h.init()},_createStyles:function(){t.parentNode||(t.type="text/css",a.getElementsByTagName("head")[0].appendChild(t))},_removeStyles:function(){t.parentNode&&t.parentNode.removeChild(t)},_createToggle:function(){if(h.customToggle){var b=h.customToggle.replace("#","");if(a.getElementById(b))i=a.getElementById(b);else{if(!a.querySelector(b))throw new Error("The custom nav toggle you are trying to select doesn't exist");i=a.querySelector(b)}}else{var c=a.createElement("a");c.innerHTML=h.label,p(c,{href:"#","class":"nav-toggle"}),"after"===h.insert?g.parentNode.insertBefore(c,g.nextSibling):g.parentNode.insertBefore(c,g),i=c}},_closeOnNavClick:function(){if(h.closeOnNavClick&&"querySelectorAll"in a){var b=g.querySelectorAll("a"),c=this;s(b,function(a){m(b[a],"click",function(){k&&c.toggle()},!1)})}},_preventDefault:function(a){a.preventDefault?(a.preventDefault(),a.stopPropagation()):a.returnValue=!1},_onTouchStart:function(b){b.stopPropagation(),"after"===h.insert&&q(a.body,"disable-pointer-events"),this.startX=b.touches[0].clientX,this.startY=b.touches[0].clientY,this.touchHasMoved=!1,n(i,"mouseup",this,!1)},_onTouchMove:function(a){(Math.abs(a.touches[0].clientX-this.startX)>10||Math.abs(a.touches[0].clientY-this.startY)>10)&&(this.touchHasMoved=!0)},_onTouchEnd:function(c){if(this._preventDefault(c),!this.touchHasMoved){if("touchend"===c.type)return this.toggle(),"after"===h.insert&&setTimeout(function(){r(a.body,"disable-pointer-events")},h.transition+300),void 0;var d=c||b.event;3!==d.which&&2!==d.button&&this.toggle()}},_onKeyUp:function(a){var c=a||b.event;13===c.keyCode&&this.toggle()},_transitions:function(){if(h.animate){var a=g.style,b="max-height "+h.transition+"ms";a.WebkitTransition=b,a.MozTransition=b,a.OTransition=b,a.transition=b}},_calcHeight:function(){for(var a=0,b=0;b<g.inner.length;b++)a+=g.inner[b].offsetHeight;var c="."+h.jsClass+" ."+h.navClass+"-"+this.index+".opened{max-height:"+a+"px !important}";t.styleSheet?t.styleSheet.cssText=c:t.innerHTML=c,c=""}},new v(d,e)};b.responsiveNav=d}(document,window,0);
\ No newline at end of file
+!function(a,b,c){"use strict";var d=function(d,e){var f=!!b.getComputedStyle,g=!!a.getElementsByClassName;f||(b.getComputedStyle=function(a){return this.el=a,this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;return"float"===b&&(b="styleFloat"),c.test(b)&&(b=b.replace(c,function(){return arguments[2].toUpperCase()})),a.currentStyle[b]?a.currentStyle[b]:null},this}),g||(a.getElementsByClassName=function(b){var c,d,e=[],f=a.getElementsByTagName("*");for(b=" "+b+" ",c=0;c<f.length;c++)d=f[c],(" "+(d.className||d.getAttribute("class"))+" ").indexOf(b)>-1&&e.push(d);return e});var h,i,j,k,l,m,n,o=function(a,b,c,d){if("addEventListener"in a)try{a.addEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.addEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"attachEvent"in a&&("object"==typeof c&&c.handleEvent?a.attachEvent("on"+b,function(){c.handleEvent.call(c)}):a.attachEvent("on"+b,c))},p=function(a,b,c,d){if("removeEventListener"in a)try{a.removeEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.removeEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"detachEvent"in a&&("object"==typeof c&&c.handleEvent?a.detachEvent("on"+b,function(){c.handleEvent.call(c)}):a.detachEvent("on"+b,c))},q=function(a){if(a.children.length<1)throw new Error("The Nav container has no containing elements");for(var b=[],c=0;c<a.children.length;c++)1===a.children[c].nodeType&&b.push(a.children[c]);return b},r=function(a,b){for(var c in b)a.setAttribute(c,b[c])},s=function(a,b){u(a,b)||(a.className+=" "+b,a.className=a.className.replace(/(^\s*)|(\s*$)/g,""))},t=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ").replace(/(^\s*)|(\s*$)/g,"")},u=function(a,b){return a.className&&new RegExp("(\\s|^)"+b+"(\\s|$)").test(a.className)},v=function(a,b,c){for(var d=0;d<a.length;d++)b.call(c,d,a[d])},w=a.createElement("style"),x=a.documentElement,y=function(b,c){var d;this.options={animate:!0,transition:284,label:"Menu",insert:"before",customToggle:"",closeOnNavClick:!1,openPos:"relative",navClass:"nav-collapse",navActiveClass:"js-nav-active",jsClass:"js",init:function(){},open:function(){},close:function(){}};for(d in c)this.options[d]=c[d];if(s(x,this.options.jsClass),this.wrapperEl=b.replace("#",""),a.getElementById(this.wrapperEl))this.wrapper=a.getElementById(this.wrapperEl);else{if(!a.querySelector(this.wrapperEl))throw new Error("The nav element you are trying to select doesn't exist");this.wrapper=a.querySelector(this.wrapperEl)}this.wrapper.inner=q(this.wrapper),i=this.options,h=this.wrapper,this._init(this)};return y.prototype={destroy:function(){this._removeStyles(),t(h,"closed"),t(h,"opened"),t(h,i.navClass),t(h,i.navClass+"-"+this.index),t(x,i.navActiveClass),h.removeAttribute("style"),h.removeAttribute("aria-hidden"),p(b,"resize",this,!1),p(a.body,"touchmove",this,!1),p(j,"touchstart",this,!1),p(j,"touchend",this,!1),p(j,"mouseup",this,!1),p(j,"keyup",this,!1),p(j,"click",this,!1);var c=this;v(k,function(a,b){p(b,"touchstart",c,!1),p(b,"touchend",c,!1),p(b,"mouseup",c,!1),p(b,"keyup",c,!1),p(b,"click",c,!1)}),i.customToggle?j.removeAttribute("aria-hidden"):j.parentNode.removeChild(j)},toggle:function(){l===!0&&(n?this.close():this.open(),this._enablePointerEvents())},open:function(){n||(t(h,"closed"),s(h,"opened"),s(x,i.navActiveClass),s(j,"active"),h.style.position=i.openPos,r(h,{"aria-hidden":"false"}),n=!0,i.open())},close:function(){n&&(s(h,"closed"),t(h,"opened"),t(x,i.navActiveClass),t(j,"active"),r(h,{"aria-hidden":"true"}),i.animate?(l=!1,setTimeout(function(){h.style.position="absolute",l=!0,t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")})},i.transition+10)):(h.style.position="absolute",t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")})),n=!1,i.close())},resize:function(){"none"!==b.getComputedStyle(j,null).getPropertyValue("display")?(m=!0,r(j,{"aria-hidden":"false"}),h.className.match(/(^|\s)closed(\s|$)/)&&(r(h,{"aria-hidden":"true"}),h.style.position="absolute"),this._createStyles(),this._calcHeight()):(m=!1,r(j,{"aria-hidden":"true"}),r(h,{"aria-hidden":"false"}),h.style.position=i.openPos,t(h,"dropdown-active"),v(k,function(a,b){t(b.parentNode,"opened")}),this._removeStyles())},handleEvent:function(a){var c=a||b.event;switch(c.type){case"touchstart":this._onTouchStart(c);break;case"touchmove":this._onTouchMove(c);break;case"touchend":case"mouseup":this._onTouchEnd(c);break;case"click":this._preventDefault(c);break;case"keyup":this._onKeyUp(c);break;case"resize":this.resize(c)}},_init:function(){this.index=c++,s(h,i.navClass),s(h,i.navClass+"-"+this.index),s(h,"closed"),l=!0,n=!1,this._closeOnNavClick(),this._createToggle(),this._createDropdowns(),this._transitions(),this.resize();var d=this;setTimeout(function(){d.resize()},20),o(b,"resize",this,!1),o(a.body,"touchmove",this,!1),o(j,"touchstart",this,!1),o(j,"touchend",this,!1),o(j,"mouseup",this,!1),o(j,"keyup",this,!1),o(j,"click",this,!1),i.init()},_createStyles:function(){w.parentNode||(w.type="text/css",a.getElementsByTagName("head")[0].appendChild(w))},_removeStyles:function(){w.parentNode&&w.parentNode.removeChild(w)},_createToggle:function(){if(i.customToggle){var b=i.customToggle.replace("#","");if(a.getElementById(b))j=a.getElementById(b);else{if(!a.querySelector(b))throw new Error("The custom nav toggle you are trying to select doesn't exist");j=a.querySelector(b)}}else{var c=a.createElement("a");c.innerHTML=i.label,r(c,{href:"#","class":"nav-toggle"}),"after"===i.insert?h.parentNode.insertBefore(c,h.nextSibling):h.parentNode.insertBefore(c,h),j=c}},_createDropdowns:function(){var b=this;k=g?h.getElementsByClassName("dropdown-toggle"):a.getElementsByClassName("dropdown-toggle"),v(k,function(a,c){o(c,"touchstart",b,!1),o(c,"touchend",b,!1),o(c,"mouseup",b,!1),o(c,"keyup",b,!1),o(c,"click",b,!1)})},_toggleDropdown:function(a){s(h,"dropdown-active");var b=a.parentNode,c=u(b.parentNode.parentNode,"dropdown");u(b,"opened")?(t(b,"opened"),c||t(h,"dropdown-active")):c?(v(q(b.parentNode),function(a,b){t(b,"opened")}),s(b,"opened")):(v(k,function(a,b){t(b.parentNode,"opened")}),s(b,"opened")),this._enablePointerEvents()},_closeOnNavClick:function(){if(i.closeOnNavClick){var a=h.getElementsByTagName("a"),b=this;v(a,function(c){o(a[c],"click",function(){m&&b.toggle()},!1)})}},_preventDefault:function(a){return a.preventDefault?(a.stopImmediatePropagation&&a.stopImmediatePropagation(),a.preventDefault(),a.stopPropagation(),!1):(a.returnValue=!1,void 0)},_onTouchStart:function(b){this._preventDefault(b),s(a.body,"disable-pointer-events"),this.startX=b.touches[0].clientX,this.startY=b.touches[0].clientY,this.touchHasMoved=!1,p(b.target,"mouseup",this,!1)},_onTouchMove:function(a){(Math.abs(a.touches[0].clientX-this.startX)>10||Math.abs(a.touches[0].clientY-this.startY)>10)&&(this._enablePointerEvents(),this.touchHasMoved=!0)},_onTouchEnd:function(a){if(this._preventDefault(a),m){var c=a||b.event,d=c.target||c.srcElement,e=!1;if(u(d,"dropdown-toggle")&&(e=!0),!this.touchHasMoved){if("touchend"===a.type)return e?this._toggleDropdown(d):this.toggle(),void 0;var f=a||b.event;3!==f.which&&2!==f.button&&(e?this._toggleDropdown(d):this.toggle())}}},_onKeyUp:function(a){var c=a||b.event,d=a.target,e=!1;u(d,"dropdown-toggle")&&(e=!0),13===c.keyCode&&(e?this._toggleDropdown(d):this.toggle())},_enablePointerEvents:function(){t(a.body,"disable-pointer-events")},_transitions:function(){if(i.animate){var a=h.style,b="max-height "+i.transition+"ms";a.WebkitTransition=b,a.MozTransition=b,a.OTransition=b,a.transition=b}},_calcHeight:function(){for(var a=0,b=0;b<h.inner.length;b++)a+=h.inner[b].offsetHeight;var c="."+i.jsClass+" ."+i.navClass+"-"+this.index+".opened{max-height:"+a+"px !important} ."+i.jsClass+" .disable-pointer-events{pointer-events:none !important} ."+i.jsClass+" ."+i.navClass+"-"+this.index+".opened.dropdown-active {max-height:9999px !important}";w.styleSheet?w.styleSheet.cssText=c:w.innerHTML=c,c=""}},new y(d,e)};b.responsiveNav=d}(document,window,0);
\ No newline at end of file