gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:38:45 25 4
gpt4 key购买 nike

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

我遇到的问题是,如果此人的名字很长,则该人的下拉菜单项不会随着他/她的名字展开。相反,它将在 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/

最佳答案

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

关于css - 如何使 CSS 悬停下拉菜单项随文本扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44276870/

25 4 0