css - 如何创建下拉菜单？

Question

我想创建下拉菜单，但是当我点击标题主菜单时，下拉菜单是内联的。我不知道问题出在哪里。如果有人帮助我，我将不胜感激。

nav{
    display:flex;
    background-color:black;
    text-transform:uppercase;
    padding-top:30px;
    padding-bottom:30px;
    font-size:15px;
    justify-content:center;
}

nav ul{
    display:flex;
}

nav ul li{
    list-style:none;
}

nav ul li a{
    text-decoration:none;
    color:white;
    position:relative;
    letter-spacing:2px;
    margin:20px;
}

nav ul li ul li{
    display:none;
}

nav ul li:hover ul li{
    display:block;
}

Answer 1

只需在嵌套的 ul 标签上添加 display: block。

这是你想要的吗？ :)

nav{
    display:flex;
    background-color:black;
    text-transform:uppercase;
    padding-top:30px;
    padding-bottom:30px;
    font-size:15px;
    height: 50px;
    justify-content:center;
}

nav ul{
    display:flex;
}

nav ul li{
    list-style:none;
}

nav ul li a{
    text-decoration:none;
    color:white;
    position:relative;
    letter-spacing:2px;
    margin:20px;
}

nav ul li ul {
    text-decoration: none;
    display: block;
}

nav ul li ul li{
    display:none;
}

nav ul li:hover ul li{
    display:block;
    color : white ;
}

<nav>
	<ul>
		<li>
			<a>Menu 1</a>
			<ul>
				<li>Hi</li>
				<li>Yo</li>
			</ul>
		</li>
		<li>
			<a>Menu 2</a>
			<ul>
				<li>Hi</li>
				<li>Yo</li>
			</ul>
		</li>
	</ul>
</nav>