overflow第一次觉得你有点可恶

今天用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。