时间戳

首页 > 解决方案 > 如何在导航栏中垂直而不是水平显示下拉菜单的内容？

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

问题描述

我正在做一个小网站项目，我创建了一个导航栏，但是当我将下拉按钮悬停时，它的内容水平显示在它下面，而不是垂直显示，我该如何更改它？我希望“注销”和“更改密码”按钮一个在另一个下方，而不是一个在另一个旁边。这就是它的样子

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

标签： htmlcssfrontend

解决方案

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

推荐阅读