爲什麼不溢出-Y：可見長得一樣溢出：可見

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類但是在做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是如何同一個

來源

2015-12-16 Memor-X