作者Kenqr (夏天的微笑)
看板Web_Design
標題[問題] CSS選單的背景
時間Tue Sep 30 15:45:34 2014
http://jsfiddle.net/fmn08ak7/
選單有加底色
#navlist ul {
background-color: azure;
margin: 5px 0px;
}
可是只有第二層看得到，第一層卻沒有。
試著把底色那行移到#navlist裡，結果卻是變成兩層都沒顏色。
請問問題是出在哪裡呢？
增加一個問題：
第二層選單的寬度目前是設定成固定150px，
有辦法讓它隨文字長度自動變化嗎？
--
﹌ ﹌
﹌ 十
起初，他們捉◢
共產黨員 ，﹑ ，我不說話，因為我不是
共產黨員
後來，他們捉▕工會會員 ●
＿<
█>
，﹑ ，我不說話，因為我沒有
參加工會
後來，他們捉▕天主教徒<█『
猶，﹑ ，我還是不說話，因為我
是新教徒
後來，他們捉▕ 猶太人 /\ 」」 =
天●=
工●=
共●，我不說話，因為我
是日耳曼人
ψQSWEET＊＊◥ 最後， 等到他們來捉我時 ▏ ▏ ▏，已經沒有人能為我說話了...
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 180.177.39.65
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1412063142.A.C4E.html
1F：推 onininon: 第一層ul沒高度 所以沒顏色 2.max-width 09/30 16:22
感謝！
第一層ul加上 overflow: auto; 就有高度了，
不過第二層選單卻會顯示不出來，所以先直接指定height處理。
第二個問題，把width改成max-width的話，
第二層選單的文字會被斷行。繼續研究中...
2F：→ leochen0818: overflow設auto的話，IE會有卷軸噢！ 10/01 10:35
對，但是還要捲動卷軸才能看到選單項目就很難用XD
3F：→ leochen0818: max-width就看你到底設多寬了 10/01 10:36
4F：推 Ammenze: 改設min-width呢? 10/01 11:52
max-width設多寬都沒用，
子選單會自動避免和其他子選單重疊，
(即使其他子選單是隱藏狀態)
然後選單的文字就會被斷行，像這樣：
http://i.imgur.com/Na5SNcw.png
設min-width也沒有隨文字長度變化的效果
這是目前的版本
http://jsfiddle.net/fmn08ak7/2/
又多了一個問題：
加了動畫效果後，會有兩個子選單暫時同時出現在螢幕的情況，
此時文字會重疊，有點醜。
有可能避免文字重疊的現象嗎？
※ 編輯: Kenqr (180.177.39.65), 10/01/2014 14:07:55
5F：→ Kenqr: 剛問完就發現解法了，給顯示中的子選單的z-index 10/01 14:13
6F：→ Kenqr: 高於隱藏中的子選單即可 10/01 14:13