CSS3 hiding transition

I have a menu where the height and visibility transitions on hover, and transitions back when it's not hovered. It works fine, but the links collapse on top of each other when it's fading back to hidden. I've been searching everywhere and I can't figure out how to keep them from collapsing on top of each other. So my question is, how do I stop it from doing that? Is it just some simple solution that I'm overlooking, or is it something more complex?

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;
}

---

As you transition the height of the <li> items, they will each gradually go to 0, so they'll all just be sitting on top of each other as they have no height.

Instead of transitioning the <li> , you could transition a max-height of the <ul> from 0 to a value that is taller than the list will be.

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

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

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

链接地址: http://www.djcxy.com/p/27420.html

上一篇: CSS3转换下滑元素

下一篇: CSS3隐藏过渡