javascript - Displaying subitems in responsive JQuery/CSS menu -

i'm sorry if i'm duplicating question... promise i've looked everywhere answer this.

i'm looking add submenu responsive menu. i'm struggling finding way display subitems main items in responsive way.

so here's code snippets... css still little rough, i'm working on can display menu items 1 slidetooggle();

i should mention working on in joomla... i've checked module configuration , template , i'm pretty sure problem not there. maybe have suggestion?

ok, here's code snippets. in advance! :)

$(function() {  			var pull 		= $('#pull');  				menu 		= $('nav ul');  				menuheight	= menu.height();    			$(pull).on('click', function(e) {  				e.preventdefault();  				menu.slidetoggle();                   			});    			$(window).resize(function(){          		var w = $(window).width();          		if(w > 320 && menu.is(':hidden')) {          			menu.removeattr('style');          		}      		});  		});

<nav id="menu" class="clearfix">    <ul class="clearfix">      <li><a class="current first-item" href="#">item1</a></li>      <li><a href="#">item2</a></li>      <li><a href="#">item3</a></li>      <ul>        <li><a href="#">subitem 3.1</a></li>        <li><a href="#">subitem 3.2</a></li>        <li><a href="#">subitem 3.3</a></li>      </ul>      <li><a href="#">item4</a></li>    </ul>    <a href="#" id="pull">menu</a>  </nav>

and css have @ moment small screens:

nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;}  	nav ul { width: 100%; display: block; height: auto;}  	nav li{ width: 50%; float: left; position: relative; z-index:10;}  	nav ul li {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;}  	nav li { border-bottom: 1px solid #cccccc;}  	nav { text-align: left; width: 100%; text-indent: 15px; }  	nav ul  { display: none; height: auto; }  	nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;}  	nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;}  	  	#nav {background: #8c1b23; color: #000; display: inline-block; font-family: 'lato', sans-serif; font-size: 11px; line-height: 35px; padding: 0 10px; text-decoration: none; }  	#nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none}  	#nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;}  	#nav ul li {color: #2d2a2a;display: block;font-family:  'lato', sans-serif;font-size: 10px;font-weight: normal;padding: 0;text-align: left;border-right:none;}  	#nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;}  	#nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; }  	#nav ul li.active > { background: #2d2a2a; color: #ebebeb; }  	#nav ul li:hover > { background: #ececec;  }  	#nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; }  	#nav ul li ul:hover  {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; }  	#nav ul li:hover ul {left:0;}  	#nav ul ul ul{display:none;}  	#nav ul li ul li:hover ul {left:100%; top:0; display: block;}  	#nav ul li:hover ul {left:100%; top:0; display:none;}  	#nav ul li:hover ul li { border:none;}  	#nav ul li:hover ul li ul li { display:none;}  	#nav ul li ul li:hover ul li { display:block;}

i think might trying accomplish:

html:

<nav id="menu" class="clearfix">   <ul class="clearfix" style="display:none">     <li><a class="current first-item" href="#">item1</a></li>     <li><a href="#">item2</a></li>     <li><a href="#">item3</a>         <ul class="submenu" style="display:none">           <li><a href="#">subitem 3.1</a></li>           <li><a href="#">subitem 3.2</a></li>           <li><a href="#">subitem 3.3</a></li>         </ul>     </li>     <li><a href="#">item4</a>         <ul class="submenu" style="display:none">           <li><a href="#">subitem 4.1</a></li>           <li><a href="#">subitem 4.2</a></li>           <li><a href="#">subitem 4.3</a></li>         </ul>     </li>   </ul>   <a href="#" id="pull">menu</a> </nav> 

js:

$(function() {         var pull        = $('#pull');         menu        = $('nav > ul');         menuheight  = menu.height();          $(pull).on('click', function(e) {             e.preventdefault();             menu.slidetoggle();          });          // added         $('#menu > ul > li').on('click', function(e) {             $(this).find('.submenu').slidetoggle();         });          // $(window).resize(function(){         //     var w = $(window).width();         //     if(w > 320 && menu.is(':hidden')) {         //         menu.removeattr('style');         //     }         // });     }); 

also, css, think have misunderstanding causing funky things happen. instance, there's huge difference b/w nav ul , nav > ul.

nav ul means ul elements under nav element follow rules defined. in other words, if ul element not direct child of nav element, css defined still apply.

nav > ul on other hand means ul element directly under nav element affected. if have ul within li, won't affected.

i hope makes sense, let me know if menu worked wanted. cheers :)

also, here's jsfiddle link: http://jsfiddle.net/u1zpoaj7/1/