我的下拉菜单没有下拉(它横向显示)以及如何粘住栏

Question

>我已经创建了一个导航栏，但下拉列表无法正常运行。 下拉列表不是向下的列表，而是横向下拉（弄乱整个导航栏）。问题可能是什么？

我还有一个关于如何粘贴导航栏的后续问题。因此，当用户向下滚动时，会出现一个背景淡入的小动画。然后，如果您向上滚动，它会淡出。

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
	margin: 0;
	padding: 0;
	background-color: #ccc;
}
header {
	height: 100vh;
}
.top-nav {
	position: fixed;
	width: 74%;
	left: 50%;
	margin-left: -37%;
	line-height: 60px;
	background-color: red;
}
.top-nav ul {
	float: right;
	margin: 0;
	padding-right: 42px;
	list-style: none;
}
.top-nav ul li {
	display: inline-block;
	padding: 16px 32px;
}
.top-nav ul li a {
	font-family: Roboto, arial;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	display: block;
}
.top-nav ul li ul {
	display: none;
}
.top-nav ul li:hover ul {
	display: block;
}
.top-nav-logo {
	position: fixed;
	width: 187px;
	height: 50px;
	float: left;
	padding: 0;
	margin: 16px 48px;
	background-color: blue;
}

<header>
	
	<div class="top-nav">
		<div class="top-nav-logo">
			<img src="/logo.png">
		</div>
		<ul>
			<li>
				<a href="#">Section 1</a>
			</li>
			<li>
				<a href="#">Section 2</a>
			</li>
			<li>
				<a href="#">More</a>
				<ul>
					<li><a href="#">More 1</a></li>
					<li><a href="#">More 2</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Section 3</a>
			</li>
			
		</ul>
	</div>
</header>

Answer 1

试试这个 css 来管理下拉列表并应用相对于 ul li 的位置（下拉列表）

.top-nav ul li ul {
    display: none;
    position: absolute;
    background-color: red;
}

Answer 2

首先，您需要给出位置：相对于内部有ul的列表，然后将位置：绝对应用于子ul。在样式中添加以下代码.css，它将起作用

.top-nav ul ul {
    position: absolute;
    top: 50px;
    left: 30px;
    float: left;
    width: 100%;
    padding: 0;
}
.top-nav ul li:nth-child(3) {
    position: relative;
}
.top-nav ul ul {
    width: 100%;
    display: inline-block;
}
.top-nav ul ul li {
    padding: 0;
}