<h1>Hover menu at &gt; 580px using matchMedia and click menu below 580px</h1>
<nav class="hover">
  <ul>
    <li><a href="#">test</a>
      <ul class="sub">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="https://www.google.com">test this one</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </li>
    <li><a href="#">test</a>
      <ul class="sub">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </li>
    <li><a href="#">test</a>
      <ul class="sub">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </li>
    <li><a href="#">test</a>
      <ul class="sub">
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
        <li><a href="#">test</a></li>
      </ul>
    </li>
  </ul>
</nav>
ul {
	margin:0;
	padding:0;
	list-style:none
}
nav li ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	border:1px solid #000;
	background:#000;
	color:#fff;
	width:10em;
}
nav.hover li:hover ul {
	display:block;
}
nav > ul > li {
	position:relative;
	float:left;
	background:#f9f9f9;
	border:1px solid #000;
	margin:0 -1px 0 0;
}
nav a{padding:10px 25px;display:block;}
.sub a{color:#fff;text-decoration:none;}
var mql = window.matchMedia("screen and (max-width: 580px)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes

function mediaqueryresponse(mql) {
  if (mql.matches){
        $("nav").removeClass('hover');

        $("nav > ul > li").click(function(event) {
            var thisChild = $(this).find('ul');
			$("nav ul ul").not(thisChild).slideUp();
			$(this).children("ul").slideToggle();
            event.stopPropagation();
        });
    } else{
		 $("nav > ul > li").unbind( "click" );
		 $("nav").addClass('hover');
		 $('ul.sub').removeAttr('style');
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js