如何在导航栏中垂直而不是水平显示下拉菜单的内容？

Question

我正在做一个小网站项目，我创建了一个导航栏，但当我悬停下拉按钮时，它的内容会水平显示在它下面，而不是垂直显示，我该如何更改它？我想要"；注销"；以及"；"更改密码"；按钮显示为一个在另一个下面，而不是一个挨着一个。就是这样

html:

<div id="navbar">
{% if user.is_authenticated %}
<div class="dropdown">
<button class="dropbtn">Hello {{ user.first_name }}</button>
<div class="dropdown-content">
<a href="{% url 'logout' %}">Logout</a>
<a href="{% url 'password_change' %}">Change Password</a>
</div>
</div>
{% else %}
<div class="dropdown">
<button class="dropbtn">You are not logged in</button>
<div class="dropdown-content">
<a href="{% url 'login' %}">Login</a>
<a href="{% url 'signup' %}">Register</a>
</div>
</div>
{% endif %}
</div>

css：

#navbar {
overflow: hidden;
background-color: #1c1c1c;
}
#navbar a {
float: left;
font-size: 16px;
background-color: #1c1c1c;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
height: 55px;
}
#navbar a:hover, .dropdown:hover .dropbtn {
background-color: #5c5c5c;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
clear: both; 
width: 160px;
}