overflow第一次觉得你有点可恶

今天用css做下拉菜单，因为不需要做手机自适应，再手机里看起来工整一点就行，可是列表中最后一个li的宽度撑开了父div，导致看起来很糟糕，所以给父元素加overflow：hidden；但是下拉列表也被隐藏了！

主要代码如下  。

<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。

posted on 2016-04-21 11:37 我是青木木阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/heqinglin/p/5416295.html

overflow第一次觉得你有点可恶相关推荐

一个屌丝程序猿的人生（九十）
说干就干,第二天周日起床以后,林萧便开始收拾东西. 好在林萧的行李也不算多,只有一些洗漱用品.衣服和被褥,外加一台笔记本电脑,便几乎是林萧的所有家当. 当天中午,林萧请宿舍里的人出去搓了一顿,也算是聊 ...
住在储藏室的小夫妻【zt】
你想洗礼一次自我的心灵吗?你想重新审视自己的人格吗?那么就请你花点时间,耐心的看完这篇文章.无须探究故事的真实,因为这个社会已经不太"真实",也经不起真实的推敲. 从搬进这家民房的 ...
震撼！住在我隔壁储藏室的大学刚毕业的小夫妻
<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-al ...
『生于八十』[郁郁寡欢]住在隔壁的刚毕业的大学生80小夫妻(我看完之后沉默...(转载)...
搬进这家民房的第一天,我就开始怀疑我隔壁的那个储藏室根本没住人.一天到晚黑黢黢的,没半点声响. 我终于还是忍受不了房间里那个破沙发了,便又一次跟房东要求,能不能让我把一些杂物放进隔壁的储藏室.房东斜着 ...
一篇让我思考良久的文章
(一) 从搬进,这家民房的第一天,我就开始怀疑我隔壁的那个储藏室根本没住人.一天到晚黑黢黢的,没半点声响. 我终于还是忍受不了房间里那个破沙发了,便又一次跟房东要求,能不能让我把一些杂物放进隔壁的储藏 ...
刚毕业的大学夫妻,我含泪看完(转帖)精彩
转自:5Q校园网有点长,但是你不会后悔看这篇贴子的,只要看过了第一章,你就会把贴子看完的,我相信这一点! 这是一篇非常感人的爱情,我是从别的地方转来的,我不知道故事是真的还是假的,但是他确实感动的我 ...
Stack Overflow被腾讯最大股东收购，影响我复制粘贴代码吗？
梦晨发自凹非寺量子位报道 | 公众号 QbitAI 每个程序员都离不开的问答网站Stack Overflow,将被腾讯最大股东Prosus以18亿美元收购. 啊这,对网站会有什么影响?毕竟离开 ...
基于用户投票的排名算法（三）：Stack Overflow
作者: 阮一峰日期: 2012年3月11日上一篇文章,我介绍了Reddit的排名算法. 它的特点是,用户可以投赞成票,也可以投反对票.也就是说,除了时间因素以外,只要考虑两个变量就够了. 但是,还 ...
bilibili深入理解计算机系统笔记(2)：第一次代码重构，汇编模拟器，递归，指令周期实现。
文章目录深入理解计算机系统笔记(2) 第一次代码重构可变参数输出print函数 bitmap学习 P10 有限自动机指令周期递归求和函数c语言和汇编语言回调函数的实现 call和ret指令的 ...

overflow第一次觉得你有点可恶

overflow第一次觉得你有点可恶相关推荐

最新文章

热门文章