Expanding DIV on mouseover / un-expands on mouseout

I found this Q/A,

But when I modify it for my usage as seen here http://jsfiddle.net/6PDEA/4/ the bottom-most div doesn't stay closed. Can anyone help?

EDIT: 1st answer fixed the "expanded on load" issue, but not the bottom-most DIV

EDIT 2: Final working code: http://jsfiddle.net/6PDEA/5/

Fixed the bottom DIV iss开发者_运维知识库ue. I just added another DIV below it with a blank graphic sized 785w x 30h.

Your CSS is wrong :

It should not be

div#fp-cat {
   height: 30px;
   width: 785px;
}

but :

div.fp-cat {
   height: 30px;
   width: 785px;
}

Because fp-cat is a class shared by various divs...