Responsive Wordpress Menu

I use superfish but it's actually not necessary. You can replace .sf-menu with whatever class you like. Wordpress call: <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_id' => 'menu-primary', 'menu_class' => 'sf-menu sf-js-enabled sf-shadow"' ) ); ?>

by Mel Karlik

HTML

<nav id="site-navigation" class="navigation-main" role="navigation">
	<ul id="menu-primary" class="sf-menu sf-js-enabled sf-shadow"><li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">Home</a>
	<ul class="sub-menu">
		<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="#">Test</a></li>
	</ul>
	</li>
	<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-9"><a href="#">Test</a>
		<ul class="sub-menu">
			<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="#">Test</a></li>
			<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-12"><a href="#">Test</a>
				<ul class="sub-menu">
				<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-21 current_page_item menu-item-26"><a href="#">Test</a></li>
				<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="#">Test</a></li>
				</ul>
			</li>
			<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">Sample Page</a></li>
		</ul>
	</li>
	<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Test</a>
		<ul class="sub-menu">
			<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Test</a></li>
		</ul>
	</li>
	<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="#">Test</a></li>
	</ul>			
</nav>

CSS

body { font-family: arial, sans-serif; }
.sf-menu { line-height: 1em; float: left; margin-bottom: 30px; }
.sf-menu, .sf-menu * { list-style: none outside none; margin: 0; padding: 0; z-index: 10; }
.sf-menu li { padding: 0; margin: 0; float: left; font-size: 13px; line-height: 1em; position: relative; }
.sf-menu a { padding: 1em 2em; margin: 0px; color: #bbb; text-decoration: none;  display: block; position: relative; }
.sf-menu > li > a:hover { background-color: #3b3b3b; }
.sf-menu > li > a { background-color: #000; border-right: 1px solid #2D3032; }
.sf-menu > li.current_page_ancestor > a  { background-color: #3b3b3b; }
li.current_page_item  > a { background-color: #3b3b3b!important; }

.sf-menu ul { position: absolute; top: -999em; width: 14em;  }
.sf-menu ul li {  padding: 0px; float: left; position: relative; white-space: nowrap;  }
.sf-menu ul li a { font-size: 13px; margin: 0;  border-bottom: 1px solid #424242; }
.sf-menu ul li:last-child a { border-bottom: medium none; }
.sf-menu ul li, .sf-menu ul li li {  display: block; width: 100%;  }
.sf-menu li li a { color: #bbb; transition: none; background-color: #1b1b1b;   }
.sf-menu li li li a { background-color: #2b2b2b; }
.sf-menu li li a:hover, .sf-menu li li.sfHover > a {  background-color: #3b3b3b; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0;  z-index: 999;   }

/*top = padding + line height of first level a */
.sf-menu > li:hover > ul, .sf-menu > li.sfHover > ul { top: 3em;  } 

ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 0em; top: 0px; left: 0em; }
.sf-menu li ul, .sf-menu li li ul { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }

 /* left = width of sub-menu but note that this will change if font is different size*/
.sf-menu li li ul { left: 14em!important; }

.subarrow {display: none; }
.subarrow.inactive { opacity: .3; }

@media only screen and (max-width: 480px) {
	.sf-menu  li a, .sf-menu ul...

JavaScript

jQuery(document).ready(function() {
    //jQuery('ul.sf-menu').superfish();
});

var pSign = $('<span>',  {class: 'toggle', html: '&#43;'}),
    mSign = $('<span>', {class: 'toggle', html: '&#45;'});

$('<div class="subarrow active"></div>').insertBefore('.sub-menu');
$('.subarrow').append(pSign);

$('.current-menu-ancestor > .subarrow').find('.toggle').replaceWith(mSign);
$('.current-menu-ancestor > .subarrow').toggleClass('active inactive');		

$('.subarrow.active').click(
    function () {
         var target = $(this).next('.sub-menu'), indicator = target.is(':visible') ? pSign : mSign;
         $(this).find('span').replaceWith(indicator.clone());
         $(this).parent().toggleClass("openmenu");
});