Почему «max-height: 0» не удается полностью скрыть мой div?

Question

Я тщательно искал решение, но не повезло. У меня есть отзывчивый nav с 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; 
} 

, как я уже говорил, когда я удалить границу, отд скрыта просто отлично, но с границей это не так. предложения?

Answer 1

Почему вы пытаетесь скрыть его с помощью max-height?

если и хотят, чтобы скрыть его полностью сделать

#menu { 
    display: none; 
} 

, если вам необходимо иметь границы попробуйте использовать

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

borderbox кладет границу на внутренней стороне DIV вместо снаружи.