如何显示嵌套列表与其父列表内联？

Question

我有一个导航栏，我想并排运行。我想要的是将“ ABC分类”部分开始与其他导航栏一起内联，“ ABC分类”导航栏是它自己的高度（〜450像素），向下移动了450像素常规的嵌入式侧边栏是它自己的高度（〜50px）。

Codepen demo

谢谢您的帮助。

#low-nav {
	background-color: #0099CC;
	display: grid;
	width: 100%;
	padding-top: 16px;
	justify-content: center;
	align-content: center;
	list-style: none;
	font-size: 14px;
}
#low-nav ul {
	list-style: none;
}
#low-nav ul a {
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	display: inline-block;
	margin-left: 25px;
}
#low-nav #side-nav{
	display: block;
}

<div id="low-nav">
	<ul>
		<a href="">
			<li>
				<ul id="side-nav">
					<li>ABC Categories</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
					<li>Stuff</li>
				</ul>
			</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
		<a href="">
			<li>Stuff</li>
		</a>
	
	</ul>
</div>