Question

这是我所拥有的菜单的模拟

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;}

Fiddle

现在的想法是，菜单项1有一个子菜单，触发通过javascript显示，子菜单应该在框外。因为这个菜单应该是响应的我假设在模板中设置overflow是有原因的，我想尽量避免改变模板。

现在您可以看到代码中Menu 1中的子菜单隐藏在框中，当我覆盖overflow-y中的Menu 2属性时，它就是它default value（与overflow'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与逐个设置所有边框的宽度，样式和颜色一样

Answer 1

overflow-x和overflow-y是CSS3的一部分（而普通overflow是CSS2），并且仍然有点实验性。当一个值是“滚动值”（包括hidden）而另一个值是visible时发生的情况的规则很复杂，并且坦率地混淆。

来自CSS3 Overflow Spec：

...如果一个级联值[sic]是滚动值之一而另一个是“可见”，则计算值是级联值，其中“visible”更改为“hidden”。

这个似乎来证明你所看到的行为，但我不明白为什么它是这样设计的。

Answer 2

overflow: visible;

不剪辑内容，可以在内容框的旁边显示，但是

overflow-y; visible;

内容在内容框中被剪切，并显示溢出自动默认值

Answer 3

我修改了fiddle，但我发现的主要问题是Mongodb 2.4的样式适用于所有四个菜单，其定义的部分是.menu，所以你是基本上与菜单2发生冲突。在CSS的第一行中从overflow: hiddden删除overflow: hidden会使菜单2和菜单4的行为与您期望的相同。

为什么不溢出-y：可见与溢出相同：可见

3 个答案: