Question

I’m pretty new to jquery / javascript but I’ve created a main navigation element. The idea is that a user hovers over a specific <li> (that is split into 2 divs). Only div1 is visible to start. When hover occurs the height on div1 is animated to 0 to reveal div2.

However, when the height animates to 0 the content of div1 (specifically look for the white h2 and h3 type) is still visible behind type of div2 (intermittently). If you mess with the <li>‘s you can get this to stop happening but I can’t log an error or figure out why it disappears at some points.

see http://jsfiddle.net/pappley/BGy6R/3/

Answer 1

You have to set the overflow to hidden:

.main-link-title {
    height: 200px;
    overflow: hidden;
}

Here’s your fiddle: http://jsfiddle.net/BGy6R/4/