今天用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. sql2005中如何启用SA账号

    如下图

  2. Centroid - SGU 134(树的搜索)

    题目大意:给你一个树,树每个点都有一个值, 这个点的的值就等于所有儿子里面点最多的那个儿子,值最小的就叫做重心,求出重心,还有所有等于重心的点,按照升序输出. 分析:就是一个简单的搜索树,求出来最大的 ...

  3. Pick-up sticks - POJ 2653 (线段相交)

    题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍.....   分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...

  4. win8.1 无法安装 net framework3.5的解决办法

    近期给重装系统时,发现Windows8.1无法安装.net framework 3.5,即使我离线下载了安装文件,还要求安装2.0和3.0....而且无法从Windows更新中获取,因此百度到以下方案 ...

  5. iOS开发总结-类似京东分类,UICollectionView

    // // TypeViewController.m // BJ // // Created by shirenfeng on 16/11/6. // Copyright © 2016年 com.ws ...

  6. 【转】Android通过Wifi来调试你的应用

    http://stormzhang.com/android/2014/08/27/adb-over-wifi/ 在Android中调试我们经常要用一根USB数据线连接到手机和电脑,一方面麻烦不说,手机 ...

  7. Codeforces Beta Round #10 D. LCIS(DP&amp;LCIS)

    D. LCIS time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  8. shell脚本实现冒泡排序 分类: 学习笔记 linux ubuntu 2015-07-10 14:16 79人阅读 评论(0) 收藏

    手动输入一行字符串,并对其排序. 脚本如下: #!/bin/bash #a test about sort echo "please input a number list" re ...

  9. asp.net下载文件的几种方法

    最近做东西遇到了下载相关的问题.在这里总结一下自己处理的方法. 1.以字节流的形式向页面输出数据以下载Excel为例子. string path=Server.MapPath("文件路径&q ...

  10. CakePHP之控制器

    控制器 控制器是MVC中的“C”. 如果你的网站使用Cake框架制作,一般根据url地址和通过路由,就会找到正确的控制器,然后控制器的动作就会被调用. 一个控制器需要解释请求数据.确保使用正确的模型. ...