html - How would I make this CSS / jQuery dropdown menu multilevel? -

i'm having trouble figuring out how make dropdown menu multilevel. here codepen of it: http://codepen.io/owlsky/pen/ddukj

i'm trying learn how menu open additional menu when user hovers on 1 of options. i'm not comfortable jquery, solution easy understand.

html:

<select name="" id="" class="dropdown">   <option class="label">label</option>   <option value="1">option 1</option>   <option value="1">option 2</option>   <option value="1">option 3</option>   <option value="1">option 4</option>   <option value="1">option 5</option>   <option value="1">option 6</option>   <option value="1">option 7</option>   <option value="1">option 8</option>   <option value="1">option 9</option> </select> 

css:

/* reset */ ul {   margin: 0;   padding: 0; }  /* --- easydropdown default theme --- */  /* prefixed css */  .dropdown, .dropdown div, .dropdown li, .dropdown div::after{     -webkit-transition: 150ms ease-in-out;     -moz-transition: 150ms ease-in-out;     -ms-transition: 150ms ease-in-out;     transition: 150ms ease-in-out; }  .dropdown .selected::after, .dropdown.scrollable div::after{     -webkit-pointer-events: none;     -moz-pointer-events: none;     -ms-pointer-events: none;     pointer-events: none; }  /* wrapper */  .dropdown{     position: relative;     width: 160px;     border: 1px solid #ccc;     cursor: pointer;     background: #fff;      border-radius: 3px;      -webkit-user-select: none;     -moz-user-select: none;     user-select: none; }  .dropdown.open{     z-index: 2; }  .dropdown:hover{     box-shadow: 0 0 5px rgba(0,0,0,.15); }  .dropdown.focus{     box-shadow: 0 0 5px rgba(51,102,248,.4); }  /* carat */  .dropdown .carat{     position: absolute;     right: 12px;     top: 50%;     margin-top: -4px;     border: 6px solid transparent;     border-top: 8px solid #000; }  .dropdown.open .carat{     margin-top: -10px;     border-top: 6px solid transparent;     border-bottom: 8px solid #000; }  /* old select (hidden) */  .dropdown .old{     position: absolute;     left: 0;     top: 0;     height: 0;     width: 0;     overflow: hidden; }  .dropdown select{     position: absolute;     left: 0px;     top: 0px; }  .dropdown.touch .old{     width: 100%;     height: 100%; }  .dropdown.touch select{     width: 100%;     height: 100%;     opacity: 0; }  /* selected feedback item */   .dropdown .selected, .dropdown li{     display: block;     font-size: 18px;     line-height: 1;     color: #000;     padding: 9px 12px;     overflow: hidden;     white-space: nowrap; }  .dropdown .selected::after{     content: '';     position: absolute;     right: 0;     top: 0;     bottom: 0;     width: 60px;      border-radius: 0 2px 2px 0;     box-shadow: inset -55px 0 25px -20px #fff; }  /* drop down wrapper */  .dropdown div{     position: absolute;     height: 0;     left: -1px;     right: -1px;     top: 100%;     margin-top: -1px;     background: #fff;     border: 1px solid #ccc;     border-top: 1px solid #eee;     border-radius: 0 0 3px 3px;     overflow: hidden;     opacity: 0; }  /* height adjusted js on open */  .dropdown.open div{     opacity: 1;     z-index: 2; }  /* fade overlay scrolling lists */  .dropdown.scrollable div::after{     content: '';     position: absolute;     left: 0;     right: 0;     bottom: 0;     height: 50px;      box-shadow: inset 0 -50px 30px -35px #fff; }  .dropdown.scrollable.bottom div::after{     opacity: 0; }  /* drop down list */  .dropdown ul{     position: absolute;     left: 0;     top: 0;     height: 100%;     width: 100%;     list-style: none;     overflow: hidden; }  .dropdown.scrollable.open ul{     overflow-y: auto; }  /* drop down list items */  .dropdown li{     list-style: none;     padding: 8px 12px; }  /* .focus class added on hover */  .dropdown li.focus{     background: #d24a67;     position: relative;     z-index: 3;     color: #fff; }  .dropdown li.active{     font-weight: 700; } 

js:

/* * easydropdown - drop-down builder styleable inputs , menus * version: 2.0.4 * license: creative commons attribution 3.0 unported - cc 3.0 * http://creativecommons.org/licenses/by/3.0/ * software may used freely on commercial , non-commercial projects attribution author/copyright holder. * author: patrick kunka * copyright 2013 patrick kunka, rights reserved */  (function(d){function e(){this.isfield=!0;this.keyboardmode=this.haslabel=this.cutoff=this.infocus=this.down=!1;this.nativetouch=!0;this.wrapperclass="dropdown";this.onselect=null}function f(a,c){var b=new e;b.init(a,c);b.instances.push(b)}e.prototype={constructor:e,instances:[],init:function(a,c){var b=this;d.extend(b,c);b.$select=d(a);b.options=[];b.$options=b.$select.find("option");b.istouch="ontouchend"in document;b.$select.removeclass(b.wrapperclass+" dropdown");b.$options.length&&(b.$options.each(function(a){var c= d(this);c.is(":selected")&&(b.selected={index:a,title:c.text()},b.focusindex=a);c.hasclass("label")&&0==a?(b.haslabel=!0,b.label=c.text(),c.attr("value","")):b.options.push({domnode:c[0],title:c.text(),value:c.val(),selected:c.is(":selected")})}),b.selected||(b.selected={index:0,title:b.$options.eq(0).text()},b.focusindex=0),b.render())},render:function(){var a=this;a.$container=a.$select.wrap('<div class="'+a.wrapperclass+(a.istouch&&a.nativetouch?" touch":"")+'"><span class="old"/></div>').parent().parent(); a.$active=d('<span class="selected">'+a.selected.title+"</span>").appendto(a.$container);a.$carat=d('<span class="carat"/>').appendto(a.$container);a.$scrollwrapper=d("<div><ul/></div>").appendto(a.$container);a.$dropdown=a.$scrollwrapper.find("ul");a.$form=a.$container.closest("form");d.each(a.options,function(){a.$dropdown.append("<li"+(this.selected?' class="active"':"")+">"+this.title+"</li>")});a.$items=a.$dropdown.find("li");a.maxheight=0;a.cutoff&&a.$items.length>a.cutoff&&a.$container.addclass("scrollable"); for(i=0;i<a.$items.length;i++){var c=a.$items.eq(i);a.maxheight+=c.outerheight();if(a.cutoff==i+1)break}a.istouch&&a.nativetouch?a.bindtouchhandlers():a.bindhandlers()},bindtouchhandlers:function(){var a=this;a.$container.on("click",function(){a.$select.focus()});a.$select.on({change:function(){var c=d(this).find("option:selected"),b=c.text(),c=c.val();a.$active.text(b);"function"==typeof a.onselect&&a.onselect.call(a,{title:b,value:c})},focus:function(){a.$container.addclass("focus")},blur:function(){a.$container.removeclass("focus")}})}, bindhandlers:function(){var a=this;a.query="";a.$container.on({click:function(){a.down?a.close():a.open()},mousemove:function(){a.keyboardmode&&(a.keyboardmode=!1)}});d("body").on("click",function(c){c=d(c.target);var b=a.wrapperclass.split(" ").join(".");!c.closest("."+b).length&&a.down&&a.close()});a.$items.on({click:function(){var c=d(this).index();a.select(c);a.$select.focus()},mouseover:function(){if(!a.keyboardmode){var c=d(this);c.addclass("focus").siblings().removeclass("focus");a.focusindex= c.index()}},mouseout:function(){a.keyboardmode||d(this).removeclass("focus")}});a.$select.on({focus:function(){a.$container.addclass("focus");a.infocus=!0},blur:function(){a.$container.removeclass("focus");a.infocus=!1}});a.$dropdown.on("scroll",function(c){a.$dropdown[0].scrolltop==a.$dropdown[0].scrollheight-a.maxheight?a.$container.addclass("bottom"):a.$container.removeclass("bottom")});a.$select.on("keydown",function(c){if(a.infocus){a.keyboardmode=!0;var b=c.keycode;if(38==b||40==b||32==b)c.preventdefault(), 38==b?(a.focusindex--,a.focusindex=0>a.focusindex?a.$items.length-1:a.focusindex):40==b&&(a.focusindex++,a.focusindex=a.focusindex>a.$items.length-1?0:a.focusindex),a.down||a.open(),a.$items.removeclass("focus").eq(a.focusindex).addclass("focus"),a.cutoff&&a.scrolltoview(),a.query="";if(a.down)if(9==b||27==b)a.close();else{if(13==b)return c.preventdefault(),a.select(a.focusindex),a.close(),!1;if(8==b)return c.preventdefault(),a.query=a.query.slice(0,-1),a.search(),!1;38!=b&&40!=b&&(c=string.fromcharcode(b), a.query+=c,a.search())}}});if(a.$form.length)a.$form.on("reset",function(){a.$active.text(a.haslabel?a.label:"")})},open:function(){var a=window.scrolly||document.documentelement.scrolltop,c=window.scrollx||document.documentelement.scrollleft,b=this.notinviewport(a);this.closeall();this.$select.focus();window.scrollto(c,a+b);this.$container.addclass("open");this.$scrollwrapper.css("height",this.maxheight+"px");this.down=!0},close:function(){this.$container.removeclass("open");this.$scrollwrapper.css("height", "0px");this.focusindex=this.selected.index;this.query="";this.down=!1},closeall:function(){var a=object.getprototypeof(this).instances;for(i=0;i<a.length;i++)a[i].close()},select:function(a){var c=this.options[a],b=this.haslabel?a+1:a;this.$items.removeclass("active").eq(a).addclass("active");this.$active.text(c.title);this.$select.find("option").prop("selected",!1).eq(b).prop("selected","selected");this.selected={index:a,title:c.title};this.focusindex=i;"function"==typeof this.onselect&&this.onselect.call(this, {title:c.title,value:c.value})},search:function(){for(i=0;i<this.options.length;i++)if(-1!=this.options[i].title.touppercase().indexof(this.query)){this.focusindex=i;this.$items.removeclass("focus").eq(this.focusindex).addclass("focus");this.scrolltoview();break}},scrolltoview:function(){if(this.focusindex>=this.cutoff){var a=this.$items.eq(this.focusindex).outerheight()*(this.focusindex+1)-this.maxheight;this.$dropdown.scrolltop(a)}},notinviewport:function(a){var c=a+(window.innerheight||document.documentelement.clientheight), b=this.$dropdown.offset().top+this.maxheight;return b>=a&&b<=c?0:b-c+5}};d.fn.easydropdown=function(a){return this.each(function(){f(this,a)})};d(function(){"function"!==typeof object.getprototypeof&&(object.getprototypeof="object"===typeof"test".__proto__?function(a){return a.__proto__}:function(a){return a.constructor.prototype});d(".dropdown").each(function(){var a=d(this).attr("data-settings");settings=a?d.parsejson(a):{};f(this,settings)})})})(jquery); 

it's not possible using easydropdown because it's not original purpose of plugin, optgroup tag (2-level only).

but if bootstrap ok :3 suggest see nested/multilevel dropdown example here:

• show dropdown when hovered
• show dropdown when clicked (good mobile)