当鼠标悬停在列表项上时，CSS下拉菜单保持可见？

Question

在网站上工作（继承其他人的代码），我正在尝试制作一个下拉菜单。当我将鼠标悬停在项目上时，下拉列表会正确显示，但只要我将鼠标指向下拉列表项目，它们就会消失。有人可以帮我弄清楚这里有什么问题吗？

#nav {
	position:fixed;
	top: -1em;
	background: #000;
	font-family: 'Abel', sans-serif;
	font-size: 1.25em;
	letter-spacing: 0.05em;
	width:100%;
	text-align:right;
	padding: 1.25em;
	z-index: 3;
}
#nav li {
	list-style-type: none;
	display: inline-block;
	margin: 0em 0.25em;
	color: #90918F;
}	
#nav li a {
	text-decoration: none;
	display: inline-block;
	padding: 0em 0.5em;
	margin: 0;
	color: #90918F;
}
#nav li a:hover {
	text-decoration: none;
	color: #90918F;
}
#nav li a.active {
	text-decoration: none;
	color: #90918F;
}
#nav li.space {
	padding: 2em;
}	
ul {
	padding: 0.05em;

}
#nav ul {
	z-index: 3;
	margin-top: 0;
	background: #000;
	display: none;
	position: absolute;
	top: 72px;
	right: 450px; 
}
#nav ul li {
	display: block;
	padding: 0.75em;
	text-align: left;
	
}
#nav li:hover > ul {
	display: block;
}
#nav li > ul:hover {
	position: absolute !important;
}
#nav ul li:after {
	position: absolute;
	left: 5%;
    top: -20px;
    width: 0;
    height: 0;
    content: '';
}

	<ul id="nav">
		<div id="logo">
			<a href="index.html"><img src="images/logo.png" class="logo"></a>
		</div>
		<li><a href="#about">ABOUT</a>
			<ul class="dropdown">
				<li><a href="#values">Values</a></li>
				<li><a href="#team">Our Team</a></li>
			</ul>
		</li>
		<li><a href="#services">SERVICES</a></li>
		<li><a href="#clients">CLIENTS</a></li>
		<li><a href="#employment">STUDENTS</a></li>
		<li><a href="#contact">CONTACT</a></li>
	</ul>