今天用css做下拉菜单,因为不需要做手机自适应,再手机里看起来工整一点就行,可是列表中最后一个li的宽度撑开了父div,导致看起来很糟糕,所以给父元素加overflow:hidden;但是下拉列表也被隐藏了!
主要代码如下 <!-- f代表father ul; c代表 child ul--> 。
<div> <ul class=“f”> <il> 点我下拉 <ul class="c"> <il>1</li> <il>2</li> <il>3</li> </ul> <li> <li>没有下拉</li> <li>没有下拉</li> <li>没有下拉</li> </ul> </div>
div { width:1000px; overflow:hidden; } .f>li {position:relative; float:left;} .c { display:none; position:absolute, } .f>li:hover .c{display:block;}
我本以为 ul.c 已经脱离了文档流,不会受div overflow:hidden的限制,但事实却还是把它隐藏了。
因为 ul.c 脱离了文档流,,虽然下拉列表出现并不会撑开ul.f,但却受 ul.fa relative 的控制, 加上 ul.fa 的祖先是div,所以div依旧是他们的老祖宗,把下面几个小虾米全给隐藏掉了。
明白了这个,我觉得让ul.c 成为 div的祖先,这样才可以脱离它的掌控。
于是我把ul.fa的relative取消了,让ul.c相对于body定位,这样的确脱离了被隐藏的厄运,但是却无法与ul.f一一对应了,因为ul.c是loop出来的,没办法单独加class真是避坑落井啊!
于是我还是寻求css方面的突破吧,继续冥思苦想
既然ul.f的relative不可以去掉,那么如果它的父元素也就是div 只要有overflow就会对他生效,下面的子孙就免不了被隐藏的厄运。
所以就不要设置overflow了,那么超出父元素的 li 该如何解决呢?
唯一的办法就是把ul.f li 设置成百分比布局,不让他超出。
看来这是唯一的办法,
可能我的水平low,无法从overflow的魔爪下救出c。