绝对定位ul stratch父div

我看下拉菜单here的例子。 Here是简化的jsfiddle示例。我想基于它构建我自己的样式化的HTML元素。没关系。但在我执行我需要包装<ul class="dropdown">...</ul>与分度，这样的CSS样式：绝对定位ul stratch父div

border: 2px solid green; 
overflow: auto;

在这种情况下与子stratch这个div的UL（据我所知），这就是为什么滚动条出现。这里是simplified jsfiddle example。

但是，如果使用的外层div下面的CSS - 一切正常：

border: 2px solid green; 
height: 35px;

Here is jsfiddle example。

你能帮我理解 - 为什么我的问题“overflow：auto” case？

TIA！

来源

2012-04-03 dizpers

你应该使用overflow：visible – 2012-04-03 17:57:36

你不想给容器一个不可见的溢出，因为这会隐藏你的下拉菜单。此外，还有很多漂浮，现在可以通过IE8 +支持inline-block。

我分叉了你的Jsfiddle，并在CSS部分的底部应用了CSS修正。这是你在找什么：http://jsfiddle.net/rgthree/VFZRB/

来源

2012-04-03 17:58:04 rgthree

非常感谢！它真的做到了！ – dizpers 2012-04-03 18:00:27

这是因为<ul>的<ul>（子菜单）中，如果您删除该规则并添加display:noneul.dropdown ul有风格visibility:hidden - 你不会看到滚动条，因为visibility:hidden蜜饯元素的宽度和高度并隐藏元素，而display:none就像从DOM中删除元素。希望这对你有所帮助

来源

2012-04-03 17:58:19 safrazik

是的，你是对的 - 它删除滚动条，但子菜单不显示。 – dizpers 2012-04-03 18:07:09

#killer{ 
border: 2px solid red; 
overflow: visible; 
} 

<div id="killer"> 
<ul class="dropdown"> 
    <li><a href="./" class="dir">Menu</a> 
     <ul> 
      <li><a href="/js/">JavaScript</a></li> 
      <li><a href="/photoshop/">Photoshop</a></li> 
      <li><a href="/design/">Design</a></li> 
      <li><a href="/misc/">Other</a></li> 
     </ul> 
    </li> 
</ul> 
<div style="clear:both;"></div> 
</div>

来源

2012-04-03 18:03:39

绝对定位ul stratch父div

回答

相关问题