/* OOOOOOOOOOOOOOOOOOOOOO Begin Responsive Menu OOOOOOOOOOOOOOOOOOOOOOOOOOOO */
#Moosewrap a{text-decoration:none;list-style: none;}
#Moosewrap li{list-style: none;}
#menu-icon {display: none;}
.menu,.menu li {margin: 0;padding: 0;}
.menu li {list-style: none;float: left;margin-right: 5px;}
.menu a:link {display: block;color: #fff;background: #336699;text-align:center} /*Button in Rest State*/
.menu a:hover {background: #990000;color: #fff;} /*Button in Hover State*/
.menu a:visited {color: #fff;background: #336699;text-align:center} /*Button in visited State*/
.menu ul {
background:transparent;
padding: 2px;
border: solid 0px #f00;
display: none;
}
.menu ul li {float: none;margin: 0;padding: 0;background: #69A3D5;}
.menu li:hover > ul {display: block;}
.current-menu-item a:link{background: #990000;} /*Current Button State*/
ul.menu ul ul { left: 100%; top: 0; }
ul.menu li:hover > ul { visibility: visible}
@media screen and (min-width: 600px) {.menu { display: block !important;}}

@media screen and (max-width: 479px) {

#Moosewrap {position: relative;}
#menu-icon { /*Nav bar in Phone Rest State*/
color: #fff;
width: 42px;
height: 30px;
background: #336699 url(menuicon.png) no-repeat 0px center;
padding: 8px 10px 0 42px;
cursor: pointer;
border: solid 1px #666;
display: block;}
#menu-icon:hover {background-color: #900;} /*Nav bar in Phone hover State*/
#menu-icon.active {background-color: #f00;} /*Nav bar in Phone Current State*/
.menu { /*Dropdown background in Phone */
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #336699;
border: solid 1px #999;
display: none; }
.menu li {clear: both;float: none; margin: 5px 0 5px 10px;}
.menu a:link,.menu ul a:link {background: none;display: inline; padding: 0; color: #fff; border: none;} /* Text rest state in dropdown */
.menu a:visited,.menu ul a:visited {background: none;display: inline; padding: 0; color: #fff; border: none;} /* Text visited state in dropdown */
.menu a:hover, .menu ul a:hover { background: none;color: #f0f;} /* Text hover state in dropdown */
.menu ul {width: auto;position: static;display: block;border: none;background: inherit;}
.menu ul li {margin: 3px 0 3px 15px;}
}

/* OOOOOOOOOOOOO End Responsive Menu OOOOOOOOOOOOOOOOOOOOOOOOO */

.menu a:link {padding: 4px 15px;font-size:14px} /* Button font and measure */
ul.menu ul ul { left: 135px} /* Third Generation Button distance left */

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){
$('#Moosewrap').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$(".menu").slideToggle();
$(this).toggleClass("active");
});

});
</script>

<nav id="Moosewrap">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("NAME OF SIDEBAR") ) : ?><?php endif; ?><br>
</nav>