css - 如何使 CSS 悬停下拉菜单项随文本扩展

Question

我正在尝试创建一个固定在页面顶部的菜单。菜单选项之一是“团队”，当鼠标悬停在团队中的所有人时，它会下拉。名称列表将动态生成。

我遇到的问题是，如果此人的名字很长，则该人的下拉菜单项不会随着他/她的名字展开。相反，它将在 2 行或更多行上显示他们的名字。

我尝试在 dropdown-content div 上使用 min-width, width: 100%，这是包含所有下拉按钮的 div。

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

似乎没有任何效果。我也试过给“下拉内容 a”一个宽度和/或最小宽度，但我仍然无法让按钮用名称展开。

这是我创建的 JSFiddle 示例:https://jsfiddle.net/ebz24jc2/2/

Answer 1

添加white-space: nowrap;

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 180px;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    white-space: nowrap;
}