作者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/cn.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