html - 为什么 '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

你为什么要尝试使用最大高度来隐藏它？

如果你想完全隐藏它

#menu {
   display: none;
}

如果你必须有一个边框尝试使用

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

borderbox 将边框放在 div 的内部而不是外部。