我有一个菜单很好,但我希望下拉菜单的最小宽度为其上方链接项的100%。用图像更容易说明:
这很好:
但我希望这个至少100%宽:
我不想要的是他们完全100%宽。我知道该怎么做,但我一直在努力让它们至少 100%宽,但我无法理解。
我正在处理的CSS的主要部分是#menu > ul > li > ul
。我尝试将min-width: 100%
应用于它,但它们都只是100%。为什么这不起作用?
Here's a fiddle显示我的问题的实时演示,其中包含菜单的所有CSS。
答案 0 :(得分:1)
这只需要几个小小的调整。
首先,定位您的li
亲戚,以便他们明确地成为子级别ul
的定位点(这是必要的,以便ul
可以带他们的他们父母的最小宽度):
#menu > ul > li {
position:relative;
}
其次,将ul
置于其父li
的左侧,并为其提供min-width
:
#menu > ul > li > ul {
left:0;
min-width:100%;
}
通过使用a
属性,禁止子级ul
内的white-space
元素在元素宽度不足时中断:
#menu > ul > li > ul > li > a {
white-space:pre;
}
http://jsfiddle.net/jLLJu/4/(为了清楚起见,我在CSS的底部添加了我的修改;随意将它们移动到相关元素的其余格式的位置。)