なぜ 'max-height：0'はdivを完全に隠さないのですか？

Question

私は解決策を徹底的に検索しましたが、運がなかった。私はmax-height: 0、基本的なものを使用して非表示にしようとしているulと応答性のあるナビゲーションがあります。 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 { 
    box-sizing: border-box; 
} 

を使用して試してみる必要がある場合は、完全に

#menu { 
    display: none; 
} 

を行うborderboxはdiv要素の内部の代わりに、外側の境界線を置きます。