爲什麼'max-height：0'未能完全隱藏我的div？

Question

我已經徹底搜索瞭解決方案，但沒有運氣。我有一個響應導航與UL我試圖隱藏使用max-height: 0，基本的東西。它可以在div沒有邊框的情況下工作，但是當我爲它添加邊框時，會顯示底部和頂部邊框（就像UL關閉一樣）。

下面是標記：

<nav id="menu"> 
     <ul> 
     <li id="li_1" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li> 
     <li id="li_2" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li> 
     <li id="li_3" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li> 
     <li id="li_4" ><a href="#">text</a><img class="li-ico" src="" alt="" /></li> 
     </ul> 
    </nav> 

和css：

#menu { 
right: 0; 
top: 100%; 
line-height: 30px; 
padding: 0 10px; 
border:1px solid red; 
border-radius:3px; 
max-height: 0; 
opacity: 1; 

-webkit-transition: max-height 0.4s ease-in-out; 
-ms-transition: max-height 0.4s ease-in-out; 
-moz-transition: max-height 0.4s ease-in-out; 
-o-transition: max-height 0.4s ease-in-out; 
transition: max-height 0.4s ease-in-out; 
} 

像我說，當我刪除邊框，DIV是隱藏得很好，但與邊境事實並非如此。 。建議？

Answer 1

你爲什麼試圖用max-height來隱藏它？

如果u想隱藏它完全做到

#menu { 
    display: none; 
} 

如果你必須有一個邊界嘗試使用

#menu { 
    box-sizing: border-box; 
} 

borderbox把邊界上的div，而不是外界的內部。