Блог

Я работаю над небольшим проектом веб-сайта, я создал навигационную панель, но когда я нажимаю кнопку раскрывающегося списка, ее содержимое отображается горизонтально под ней, а не вертикально, как мне это изменить? Я хочу, чтобы кнопки «Выход» и «Изменить пароль» появлялись одна под другой, а не одна рядом с другой. вот как это выглядит

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;
}
 

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