CSS3隐藏转换

Question

我有一个菜单，其中高度和可见性在悬停时转换，并在没有悬停时转换回来。它工作正常，但当链接逐渐消失时，链接会相互折叠。我一直在寻找各地，我无法弄清楚如何防止它们在彼此之上坍塌。所以我的问题是，如何阻止它这样做呢？它只是一些我忽略的简单解决方案，还是更复杂的东西？

HTML

<header>
<section id="logo_section">
    <h1><a href="#">FLASH OF REALITY</a></h1>
    <p>Photography, Film, & Animation in Utah</p>
</section>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Photography</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Animation</a></li>
        <li><a href="#">My Portfolio</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About Me</a></li>
    /ul>
</nav>
</header>

CSS

header ul li {
visibility: hidden;
height: 0px;
transition: visibility .5s, height .5s;
}

header:hover ul li {
visibility: visible;
height: 57px;
}

Answer 1

当您转换<li>项目的高度时，它们将逐渐变为0，因此它们只是坐在彼此的顶部，因为它们没有高度。

您可以将<li>的最大高度从0转换为比列表更高的值，而不是转换<ul>。

header ul {
  max-height: 0;
  transition: max-height .5s;
  overflow: hidden;
}

header:hover ul {
  max-height: 600px;
}

<强> http://jsfiddle.net/4CfeU/2/