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

overflow第一次觉得你有点可恶的更多相关文章

  1. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  2. 第一次在stack overflow回答问题

    越发感觉英语的重要性,尝试阅读英文与写作英文.于是选择了stack overflow来进行实践.作为萌新小白,只学习过C语言,就在c标签下乱逛.尝试看懂一些问题且试着回答. 发现一个问题: I nee ...

  3. IE6、IE7、IE8中overflow:hidden无效问题

    在做图片无缝滚动效果时遇到了这个兼容问题 div宽1000px高250px超出隐藏. 但在Firefox中正常,超出部分隐藏,但是在IE6.IE7.IE8.Sogou高速下都显示了出来.做了这么多年的 ...

  4. onclick控制元素显示与隐藏时,点击第一次无反应的原因

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. 移动端html的overflow:hidden属性失效问题

    这第一次做手机端网页,在交付测试的时候发现一个问题, 就是body的宽度,我设置了overflow:hidden,在谷歌调试的时候确实是不能滑动的,但是在手机端测试的时候发现,overflow:hid ...

  6. Stack Overflow是如何做应用缓存的

    首先要说下缓存是什么?缓存,就是在取出数据结果后,暂时将数据存储在某些可以快速存取的位置(例如各种NoSQL如Redis,HBase,又或MemoryCache等等),于是就可以让这些耗时的数据结果多 ...

  7. Tishreen-CPC 2018 G. Colors Overflow(分块)

    Problem G. Colors Overflow Input file: standard input Output file: standard output Balloon Color: Da ...

  8. 《Go 精进之路》 读书笔记 (第一次更新)

    <Go 精进之路> 读书笔记.简要记录自己打五角星的部分,方便复习巩固.目前看到p120 Go 语言遵从的设计哲学为组合 垂直组合:类型嵌入,快速让一个类型复用其他类型已经实现的能力,实现 ...

  9. Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder

    Stack Overflow 排错翻译  - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder 转自:ht ...

随机推荐

  1. oracle自动编号

    oracle自动编号 在access中有自动编号的数据类型,MSSQL和MYSQL也都有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值,而oracle没有自动增长的数据类型,我们需要建 ...

  2. git bash【初级入门篇】

    最近公司打算使用git代替之前的svn版本控制工具,趁此机会打算好好学学git,这个号称当今世界最牛的分布式版本控制工具. 一.[git和svn的主要区别] 1.去中心化 svn以及微软的TFS均采用 ...

  3. HDOJ 2011 多项式求和

    Problem Description 多项式的描述如下: 1 - 1/2 + 1/3 - 1/4 + 1/5 - 1/6 + - 现在请你求出该多项式的前n项的和. Input 输入数据由2行组成, ...

  4. Python参数中的*和**

    def funct3(x, y=1, z=1, *tup): print((x, y, z) + tup) def funct4(x, y=1, z=1, **dictionary): print(x ...

  5. 佛山Uber优步司机奖励政策(1月25日~1月31日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. Error, some other host already uses address

    rhel 5.9,在修改完网卡配置信息重启网卡之后提示如下无法激活网卡: Error, some other host already uses address 确认配置的IP地址是没有在用的,解决办 ...

  7. cf 702B

    You are given n integers a1, a2, ..., an. Find the number of pairs of indexes i, j (i < j) that a ...

  8. java 打包插件

    是时候闭环Java应用了 原创 2016-08-16 张开涛  你曾经因为部署/上线而痛苦吗?你曾经因为要去运维那改配置而烦恼吗?在我接触过的一些部署/上线方式中,曾碰到过以下一些问题: 1.程序代码 ...

  9. 如何仿写thinkphp的S方法?

    代码如下: <?php $info=S("name","lizhaoyao"); $name=S("name"); var_dump( ...

  10. 搜狗输入法皮肤安装 分类: windows常用小技巧 2014-05-04 15:10 172人阅读 评论(0) 收藏

    第一步: 下载皮肤,皮肤是.ssf格式的. 第二步: 找到安装目录:(以我的为例) D:\软件\搜狗输入法\SogouInput\7.1.0.1652\AllSkin: 把下载的皮肤剪切(或复制)到此 ...