CSSホバードロップダウンメニュー項目をテキストで展開する方法

Question

ページの上部に固定されるメニューを作成しようとしています。メニューの選択肢の1つは「TEAM」です。これは、チームの全員と一緒にホールドしたときにドロップされます。名前のリストは動的に生成されます。

私が抱えている問題は、人の名前が長い場合、その人のドロップダウンメニュー項目は彼/彼女の名前で拡大しないということです。代わりに、2つ以上の行に名前が表示されます。

すべてのドロップダウンボタンが含まれているdivであるドロップダウンコンテンツdivの幅、幅：100％を試しました。

.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/

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

Answer 2

あなたがラップしたくないテキストの親にwhite-space: nowrap;を追加してみてください。