如何创建与移动设备兼容的响应式下拉菜单？

Question

我有一个3级菜单，我正在尝试添加移动功能。

第一级下拉菜单有效，但悬停时悬停在左侧，并超出屏幕范围，我希望将其下拉而不悬停。

如果您需要查看链接，我创建了一个jsfiddle：

https://jsfiddle.net/Netmaster/ch1y8bwj/36/

感谢您的帮助，谢谢

这是我的代码：

$("#nav div").click(function(){
		$("ul").slideToggle();
		$("ul ul").css("display", "none");
	});
  
	$('ul li').click(function () {
		$(this).siblings().find('ul').slideUp();
		$(this).find('ul').slideToggle();
	});
	$(window).resize(function(){
		if($(window).width() > 768){
			$("ul").removeAttr('style');
		}
	});

#nav ul{
	margin:0;
	padding:0;
	list-style:none;
}
#nav ul li{
	margin:0;
	padding:10px 20px;
	position:relative;
	height:20px;
	line-height:20px;
	background-color:#EEE;
}
#nav > ul > li {
	float: left;
	height:30px;
	line-height:30px;
	background-color:#CCC;
}
#nav li > ul{
	visibility:hidden;
	width:200px;
	position: absolute;
	top:0px;
	left:200px;
	border-left:1px solid #000;
}
#nav > ul > li > ul{
	top:50px;
	left:0;
}
#nav li:hover{
	background-color:#999;
}
#nav li:hover > ul{
	visibility:visible;
}

#nav ul li i {
  color: #292929;
  float: right;
  padding-left: 20px;
}

#nav div {
  background: lightgrey;
  color: #292929;
  font-size: 24px;
  padding: 0.6em;
  cursor: pointer;
  display: none;
}
@media(max-width: 768px) {
 #nav div {
    display: block;
  }
#nav ul {
    display: none;
    position: static;
    background: #e3e3e3;
  }

#nav > ul > li {
    display: block;
}

#nav > ul > li > ul{
    display: block;
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />

<nav id="nav">

  <div>
    <i class="fa fa-bars"></i>
  </div>
	<ul>
    	<li>Level 1</li>
    	<li>Level 1</li>
    	<li>Level 1</li>
    	<li>Level 1
        	<ul>
            	<li>Level 2-1</li>
            	<li>Level 2-2
                	<ul>
                    	<li>Level 3-1</li>
                    	<li>Level 3-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>