Skel framework multi level/dropdown navigation

Question

I am currently using skel framework for my basic website. I need to make the nav into multi level nav (dropdown). Is there a built in feature or Do I need to include some plugin? With my current setting, single level nav is working well, but when I nest the UL & LI tags, it breaks the page.

 /* skel-baseline v2.0.3 | (c) n33 | getskel.com | MIT licensed */ (function($) { skel.init({ reset: 'full', breakpoints: { global: { href: 'assets/css/style.css', containers: 1400, grid: { gutters: ['40px', 0] } }, xlarge: { media: '(max-width: 1680px)', href: 'assets/css/style-xlarge.css', containers: 1200 }, large: { media: '(max-width: 1280px)', href: 'assets/css/style-large.css', containers: 960, grid: { gutters: ['40px', 0] }, viewport: { scalable: false } }, medium: { media: '(max-width: 980px)', href: 'assets/css/style-medium.css', containers: '90%' }, small: { media: '(max-width: 736px)', href: 'assets/css/style-small.css', containers: '90%', grid: { gutters: ['40px', 0] } }, xsmall: { media: '(max-width: 480px)', href: 'assets/css/style-xsmall.css' } }, plugins: { layers: { config: { mode: 'transform' }, navPanel: { animation: 'pushX', breakpoints: 'medium', clickToHide: true, height: '100%', hidden: true, html: '<div data-action="moveElement" data-args="nav"></div>', orientation: 'vertical', position: 'top-right', side: 'right', width: 250 }, navButton: { breakpoints: 'medium', height: '4em', html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span>', position: 'top-right', side: 'top', width: '6em' } } } }); $(function() { var $window = $(window), $body = $('body'); // Disable animations/transitions until the page has loaded. $body.addClass('is-loading'); $window.on('load', function() { $body.removeClass('is-loading'); }); }); })(jQuery); 

 /* skel-baseline v2.0.3 | (c) n33 | getskel.com | MIT licensed */ /* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} /* Box Model */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Container */ .container { margin-left: auto; margin-right: auto; /* width: (containers) */ width: 1200px; } /* Modifiers */ /* 125% */ .container.\\31 25\\25 { width: 100%; /* max-width: (containers * 1.25) */ max-width: 1500px; /* min-width: (containers) */ min-width: 1200px; } /* 75% */ .container.\\37 5\\25 { /* width: (containers * 0.75) */ width: 900px; } /* 50% */ .container.\\35 0\\25 { /* width: (containers * 0.50) */ width: 600px; } /* 25% */ .container.\\32 5\\25 { /* width: (containers * 0.25) */ width: 300px; } /* Grid */ .row { border-bottom: solid 1px transparent; } .row > * { float: left; } .row:after, .row:before { content: ''; display: block; clear: both; height: 0; } .row.uniform > * > :first-child { margin-top: 0; } .row.uniform > * > :last-child { margin-bottom: 0; } /* Gutters */ /* Normal */ .row > * { /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ padding: 0 0 0 2em; } .row { /* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */ margin: 0 0 -1px -2em; } .row.uniform > * { /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ padding: 2em 0 0 2em; } .row.uniform { /* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */ margin: -2em 0 -1px -2em; } /* 200% */ .row.\\32 00\\25 > * { /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ padding: 0 0 0 4em; } .row.\\32 00\\25 { /* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */ margin: 0 0 -1px -4em; } .row.uniform.\\32 00\\25 > * { /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ padding: 4em 0 0 4em; } .row.uniform.\\32 00\\25 { /* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */ margin: -4em 0 -1px -4em; } /* 150% */ .row.\\31 50\\25 > * { /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ padding: 0 0 0 1.5em; } .row.\\31 50\\25 { /* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */ margin: 0 0 -1px -1.5em; } .row.uniform.\\31 50\\25 > * { /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ padding: 1.5em 0 0 1.5em; } .row.uniform.\\31 50\\25 { /* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */ margin: -1.5em 0 -1px -1.5em; } /* 50% */ .row.\\35 0\\25 > * { /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ padding: 0 0 0 1em; } .row.\\35 0\\25 { /* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */ margin: 0 0 -1px -1em; } .row.uniform.\\35 0\\25 > * { /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ padding: 1em 0 0 1em; } .row.uniform.\\35 0\\25 { /* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */ margin: -1em 0 -1px -1em; } /* 25% */ .row.\\32 5\\25 > * { /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ padding: 0 0 0 0.5em; } .row.\\32 5\\25 { /* margin: -(gutters.horizontal) 0 -1px -(gutters.vertical) */ margin: 0 0 -1px -0.5em; } .row.uniform.\\32 5\\25 > * { /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ padding: 0.5em 0 0 0.5em; } .row.uniform.\\32 5\\25 { /* margin: -(gutters.vertical) 0 -1px -(gutters.vertical) */ margin: -0.5em 0 -1px -0.5em; } /* 0% */ .row.\\30 \\25 > * { padding: 0; } .row.\\30 \\25 { margin: 0 0 -1px 0; } /* Cells */ .\\31 2u, .\\31 2u\\24 { width: 100%; clear: none; margin-left: 0; } .\\31 1u, .\\31 1u\\24 { width: 91.6666666667%; clear: none; margin-left: 0; } .\\31 0u, .\\31 0u\\24 { width: 83.3333333333%; clear: none; margin-left: 0; } .\\39 u, .\\39 u\\24 { width: 75%; clear: none; margin-left: 0; } .\\38 u, .\\38 u\\24 { width: 66.6666666667%; clear: none; margin-left: 0; } .\\37 u, .\\37 u\\24 { width: 58.3333333333%; clear: none; margin-left: 0; } .\\36 u, .\\36 u\\24 { width: 50%; clear: none; margin-left: 0; } .\\35 u, .\\35 u\\24 { width: 41.6666666667%; clear: none; margin-left: 0; } .\\34 u, .\\34 u\\24 { width: 33.3333333333%; clear: none; margin-left: 0; } .\\33 u, .\\33 u\\24 { width: 25%; clear: none; margin-left: 0; } .\\32 u, .\\32 u\\24 { width: 16.6666666667%; clear: none; margin-left: 0; } .\\31 u, .\\31 u\\24 { width: 8.3333333333%; clear: none; margin-left: 0; } .\\31 2u\\24 + *, .\\31 1u\\24 + *, .\\31 0u\\24 + *, .\\39 u\\24 + *, .\\38 u\\24 + *, .\\37 u\\24 + *, .\\36 u\\24 + *, .\\35 u\\24 + *, .\\34 u\\24 + *, .\\33 u\\24 + *, .\\32 u\\24 + *, .\\31 u\\24 + * { clear: left; } .\\-11u { margin-left: 91.6666666667% } .\\-10u { margin-left: 83.3333333333% } .\\-9u { margin-left: 75% } .\\-8u { margin-left: 66.6666666667% } .\\-7u { margin-left: 58.3333333333% } .\\-6u { margin-left: 50% } .\\-5u { margin-left: 41.6666666667% } .\\-4u { margin-left: 33.3333333333% } .\\-3u { margin-left: 25% } .\\-2u { margin-left: 16.6666666667% } .\\-1u { margin-left: 8.3333333333% } 

 <nav id="nav"> <ul> <li><a href="#top">Top</a></li> <li><a href="#content">Content</a></li> <li><a href="#elements">Elements</a> <ul><li>Link 1</li><li>link 2</li><li>Link 3</li></ul> </li> <li><a href="#grid">Grid System</a></li> <li><a href="http://getskel.com" class="button special">Download</a></li> </ul> </nav> 

Answer 1

There is no support built into the skel.js or css that supports any drop down menus. You need to either incorporate a dropdown menu plugin (preferably a jQuery plugin, since you're already using jQuery) or code your own.

Answer 2

It's not built into skel, but it exists. The author of skel wrote dropotron, which adds dropdown menus to jquery and incorporates easily with the rest of skel plugins.

https://github.com/n33/jquery.dropotron