如何製作CSS懸停下拉菜單項目用文字展開

我正在嘗試創建一個將固定在頁面頂部的菜單。其中一個菜單選項是「團隊」，當與團隊中的所有人一起盤旋時，團隊將下降。名稱列表將會動態生成。如何製作CSS懸停下拉菜單項目用文字展開

我遇到的問題是，如果該人的姓名很長，那麼該人的下拉菜單項不會以他/她的名字展開。相反，它會在2行或更多行顯示他們的名字。

我試過在下拉內容div上使用最小寬度，寬度：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; 
}

沒有什麼似乎工作。我也試着給'下拉內容'一個寬度和/或最小寬度，但我仍然無法讓按鈕擴展名稱。

這是我創建的的jsfiddle例如：https://jsfiddle.net/ebz24jc2/2/

來源

2017-05-31 user3130810

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

來源

2017-05-31 06:08:19

你，先生，是驚人的！謝謝！ – user3130810

@ user3130810歡迎您:) –

請嘗試添加white-space: nowrap;你不想自動換行的母公司。

來源

2017-05-31 06:07:50 itacode

如何製作CSS懸停下拉菜單項目用文字展開

回答

相關問題