这是我的菜单模型
HTML
Menu 1 (overflow:hidden)
<div class='menu'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 2 (overflow:hidden; overflow-y visible)
<div class='menu menu2'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 3 (overflow-x:hidden;)
<div class='menu3'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<br/><br/>
Menu 4 (overflow:visible;)
<div class='menu menu4'>
<ul>
<li>
Item 1
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
<li>submenu 5</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
CSS
.menu {border:1px solid #000000; overflow:hidden;}
.menu ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu li {display:inline-block}
.menu li::after {content: " | ";}
.menu ul ul {position:absolute}
.menu ul ul li {display:block;}
.menu2 {overflow-y:visible}
.menu4 {overflow:visible}
.menu3 {border:1px solid #FF0000;overflow-x:hidden}
.menu3 ul {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu3 li {display:inline-block}
.menu3 li::after {content: " | ";}
.menu3 ul ul {position:absolute}
.menu3 ul ul li {display:block;}
现在的想法是,菜单项 1 有一个子菜单,该子菜单通过 javascript 触发显示,子菜单应该位于框外。因为这个菜单应该是响应式的,所以我假设模板中设置了 overflow
是有原因的,我想尽可能避免改变模板。
现在您可以通过代码看到 Menu 1
中的子菜单隐藏在框中,当我去覆盖 中的
是 default value (与 overflow-y
属性时菜单 2overflow
's 相同)它仍然隐藏并且有一个滚动框。
现在以防万一 overflow
中有什么奇怪的东西仍然设置为 y 轴我去复制 menu
类 Menu 3
而不是 overflow:hidden
我只是做了 overflow-x:hidden;
但它仍然是一个滚动条。 Menu 4
展示了如果 overflow
设置为可见(默认值)我没有滚动条并且我的子菜单按原样显示。
我的问题是为什么 overflow-y:visible
看起来和 overflow:visible
不一样?据我了解,overflow:visible
只是 overflow-x:visible; overflow-y:visible
很像border:1px solid #000000
一样,一个一个设置所有边框边的宽度,样式和颜色
最佳答案
overflow-x
和 overflow-y
是 CSS3 的一部分(而普通 overflow
是 CSS2),并且仍处于试验阶段。当一个值是“滚动值”(包括 hidden
)而另一个值是 visible
时发生的事情的规则很复杂,坦率地说令人困惑。
- ... if one cascaded values [sic] is one of the scrolling values and the other is ‘visible’, then computed values are the cascaded values with ‘visible’ changed to ‘hidden’.
这似乎证明了您所看到的行为是合理的,但我不明白为什么要这样设计。
关于css - 为什么不溢出-y :visible look the same as overflow:visible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34324173/