我的下拉菜单没有下拉（它出现在侧面）以及如何粘在栏上

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列表，然后将位置：绝对值应用于子ul。在style.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;
}