Toolbar下拉菜单位置异常及按钮偏移问题求助

Hey there! Let's tackle those two toolbar problems you're facing. I've reviewed your code and identified the key issues—here's how to fix them step by step:

1. Fixing the Dropdown Button Alignment (It's Too Low) #

The main culprit here is the unnecessary <a> tag wrapping your dropdown, plus using absolute positioning that breaks the flex alignment in .centered_toolbar. We'll restructure the right-side elements and use flexbox properly instead of absolute positioning for better consistency.

2. Making the Dropdown Menu Appear Directly Below the Button #

Right now, your .dropdown-content is positioned absolutely relative to the nearest positioned ancestor (which isn't the dropdown button itself). Adding position: relative to the .dropdown container will anchor the dropdown menu to its parent button.

Modified CSS Code #

.toolbar {
  list-style-type: none;
  height: 90px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #252525;
  box-shadow: 1px 1px 5px #0d0d0d;
}

.centered_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 自动分配左右空间，替代绝对定位 */
  height: 100%; /* 确保容器占满toolbar高度，让元素垂直居中 */
  padding: 0 20px; /* 左右内边距，替代绝对定位的margin */
}

.toolbar ul {
  list-style-type: none;
  list-style: none;
  display: flex; /* 用flex布局列表项，替代float */
  margin: 0;
  padding: 0;
}

.toolbar li {
  /* 移除float，改用flex布局 */
}

.toolbar a {
  display: flex;
  align-items: center; /* 让图标和文字垂直居中 */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  height: 100%; /* 确保链接占满父元素高度，对齐更一致 */
}

.toolbar a:hover {
  color: #cccccc;
}

.dropdown {
  position: relative; /* 关键：让下拉菜单相对于这个容器定位 */
  margin-right: 20px; /* 和logout保持间距 */
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  display: flex;
  align-items: center; /* 让按钮内的文字和图标垂直居中 */
  height: 100%; /* 确保按钮高度和其他元素一致 */
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* 让菜单紧贴按钮底部 */
  left: 0; /* 对齐按钮左侧 */
  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;
  height: auto; /* 重置高度，下拉菜单不需要占满toolbar高度 */
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* 右侧元素容器，让dropdown和logout横向排列 */
.toolbar-right {
  display: flex;
  align-items: center;
}

Modified HTML Code #

<div class="toolbar">
  <div class="centered_toolbar">
    <!-- Logo -->
    <img src="./logo.png" width="200px" height="auto">
    
    <!-- 左侧导航 -->
    <ul>
      <li class="active">
        <a href='#' onclick="goToMainPage()">
          <i class="dashboard"></i>Dashboard
        </a>
      </li>
      <li>
        <a href='#' onclick="goToNoteslistPage()">
          <i class="notenliste"></i>Notenliste
        </a>
      </li>
    </ul>
    
    <!-- 右侧元素容器 -->
    <div class="toolbar-right">
      <!-- Dropdown -->
      <div class="dropdown">
        <button class="dropbtn">
          Dropdown <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
      
      <!-- Logout -->
      <a href='#' onclick="logout()">
        <i class="logout"></i>Logout
      </a>
    </div>
  </div>
</div>

Key Changes Explained: #

• Removed absolute positioning from all toolbar elements. Instead, we use justify-content: space-between in .centered_toolbar to push elements to the left and right naturally—this is more responsive and avoids layout breaks.
• Added position: relative to .dropdown so the dropdown menu (absolute positioned) anchors directly to the button, ensuring it appears right below.
• Used flexbox for horizontal layouts (on the navigation list and right-side elements) instead of float, which makes vertical alignment far easier.
• Removed the redundant <a> tag wrapping the dropdown—it was causing alignment issues and unnecessary click handlers.
• Added vertical alignment rules to all interactive elements, ensuring buttons, links, and icons sit perfectly centered in the toolbar.

These changes should resolve both the dropdown menu positioning and the button alignment problems!

内容的提问来源于stack exchange，提问作者Filip Degenhart