Screen-reader accessible responsive dropdown

dropdown.html

<a class="toggleMenu" href="#">Menu</a>
<ul class="nav clearfix">
	<li class="topLvlItem parent">
		<a href="#">Item 1</a>
		<ul class="subLvlNav">
			<li class="subLvlItem subParent">
				<a href="#">Browse by Interest</a>
				<ul class="btmLvlNav">
					<li><a href="#">Sports</a></li>
					<li><a href="#">Academics</a></li>
					<li><a href="#">Arts</a></li>
					<li><a href="#">Community Service</a></li>
					<li><a href="#">Politics</a></li>
				</ul>
			</li>
			<li class="subLvlItem subParent">
				<a href="#">Browse by Group Type</a>
				<ul class="btmLvlNav">
					<li><a href="#">Recognized Student Group</a></li>
					<li><a href="#">Course/Program Union</a></li>
					<li><a href="#">Hart House Group</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="topLvlItem parent">
		<a href="#">Item 2</a>
		<ul class="subLvlNav">
			<li><a href="#">Apples</a></li>
			<li><a href="#">Bananas</a></li>
			<li><a href="#">Pears</a></li>
			<li><a href="#">Oranges</a></li>
		</ul>
	</li>
	<li class="topLvlItem"><a href="#">Item 3</a></li>
	<li class="topLvlItem"><a href="#">Item 4</a></li>
	<li class="topLvlItem"><a href="#">Item 5</a></li>
	<li class="topLvlItem"><a href="#">Item 6</a></li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
if ($(window).width() < 600) {
	$(".nav").hide();
	$(".toggleMenu").click(function(e) {
		$(".nav").toggle();
		e.preventDefault();
	});
	$(".parent > a, .subParent > a").click(function(e){
		$(this).parent().toggleClass("hover");
		e.preventDefault();
	})
} else {
	$(".parent, .subParent").hover(function(){
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	})
}
</script>
<style>
.toggleMenu {
    display:  none;
}
.nav, .subLvlNav, .btmLvlNav {
    list-style: none outside none;
}
.nav > li {
    float: left;
}
.topLvlItem {
    position: relative;
    z-index: 200;
}
.topLvlItem a {
    color: #FFFFFF;
    display: block;
    font-size: 18px;
    padding: 6px 20px 6px 20px;
    text-decoration: none;
    background-color: #444;
}
.subLvlNav {
    left: -9999px;
    position: absolute;
    top: 100%;
    width: 16em;
    z-index: 100;
}
.parent.hover .subLvlNav {
    left: 0;
}
.subLvlNav a {
    background: #222;
    display: block;
    padding: 5px 10px;
}
.subLvlItem {
    position: relative;
}
.subParent.hover .btmLvlNav {
    left: 100%;
}
.btmLvlNav {
    left: -9999px;
    position: absolute;
    top: 0;
    width: 16em;
}
.btmLvlNav a {
    background-color: #888;
}
@media screen and (max-width: 600px) {
    .nav li {
        float: none;
    }
    .topLvlItem .subLvlNav, .subLvlItem .btmLvlNav {
        display: none;
        left: 0;
        margin-bottom: 0;
        position: static;
        width: 100%;
    }
    .topLvlItem.hover .subLvlNav, .subLvlItem.hover .btmLvlNav {
        display: block;
    }
    .toggleMenu {
        display: block;
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
    }
}
</style>