.dropdown-menu {
    display: none; /* 初始状态隐藏 */
    position: absolute; /* 相对于父元素定位 */
    background-color: #fff; /* 背景色 */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 阴影 */
    z-index: 1; /* 确保在其他元素之上 */
    min-width: 160px; /* 最小宽度 */
    border-radius: 5px; /* 圆角 */
    padding: 10px 0; /* 内边距 */

    /* ******** 关键修改 ******** */
    /* top: calc(100% + 5px); */ /* 保持在父元素下方 */
    /* right: 0; */             /* 移除或修改此行 */
    left: 0;                   /* 新增：让菜单左边缘与父元素左边缘对齐 */
    /* 或者如果您想让它居中，可以更复杂一些，但 left: 0; 是最直接的解决方案 */
    /* ************************* */
}

/* 确保 .user-info 或其最近的定位父元素有 position: relative; */
/* 根据您的HTML结构，假设 user-info 是 .dropdown-menu 的直接定位父元素 */
.user-info {
    position: relative; 
    flex-direction: column;
}

/* .user-info:hover .dropdown-menu {
    display: block;
} */
.user-info:hover .dropdown-menu,
  .user-info:focus-within .dropdown-menu {
      display: block;
  }
  
.dropdown-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu ul li {
    padding: 8px 15px;
    cursor: pointer;
}

.dropdown-menu ul li:hover {
    background-color: #f1f1f1;
}

.dropdown-menu ul li a {
    text-decoration: none;
    color: #333;
    display: block;
}

.logout-item {
    color: #dc3545; /* 退出登录选项可以特殊颜色 */
}