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> 的高度时items，它们每个都会逐渐变为 0，因此它们将只是坐在彼此之上，因为它们没有高度。

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

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

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

http://jsfiddle.net/4CfeU/2/