我正在尝试创建一个下拉菜单，然后尝试创建一个下拉菜单，菜单中的列表项全部聚集在同一行中。我似乎无法找出问题所在。我正在尝试更改显示属性，编辑边距和填充，但是由于某些原因，它似乎不起作用。如果有人能够提供帮助，我将不胜感激。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate”>
<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”Expires” content=”0”>
<link rel="stylesheet" type="text/css" href="css/nav-style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li class="dropdown-button">Forums
<ul class="dropdown">
<li>Staff</li>
<li>Complaints</li>
<li>Applications</li>
</ul>
</li>
<li>Store</li>
</ul>
</nav>
<script>
for(var i = 0;i<100;i++) {
document.writeln("<br>");
}
</script>
</body>
nav {
/* height: 70px; */
background-color: rgb(66, 66, 66);
z-index: 3;
width: 100%;
min-width: 236px;
}
nav > ul {
display: inline-block;
width: 100%;
min-width: 240px;
padding-left: 0;
}
nav > ul > li {
display: inline-block;
font-size: 2.2em;
text-align: center;
width: 33%;
min-width: 150px;
text-transform: uppercase;
}
nav > ul > li:hover {
cursor: pointer;
}
nav > ul > li:after {
top: 15px;
content: '';
display: block;
border-bottom: 3px solid red;
width: 100%;
transform-origin: 50%;
transform: scaleX(0);
transition: transform 0.7s ease-in-out;
}
nav > ul > li:hover:after {
transform: scaleX(1);
}
.dropdown li {
position: absolute;
font-size: 0.7em;
display: block;
width: 100%;
text-transform: none;
margin-right: 100%;
}
.dropdown {
display: none;
height: 100%;
}
.dropdown-button {
height: 100%;
}
.dropdown-button:hover .dropdown {
display: block;
}
我的代码（小提琴）：https://jsfiddle.net/6b4epg7a/
提前感谢！
您需要添加位置：相对于下拉菜单的父li：
.dropdown-button {
position: relative;
}
和位置：对子元素绝对。
.dropdown {
position: absolute;
display: none
}
.dropdown li {
line-height: 27px;
font-size: 0.7em;
text-transform: none;
list-style: none;
}
检查jsfiddle：https://jsfiddle.net/nza9gy8k/1/
要了解有关在CSS中定位的更多信息。检查https://developer.mozilla.org/en-US/docs/Web/CSS/position