css - Dropline menu without JS

Question

I've been searching for a dropline menu without JS - but without any luck. I'm trying to build a menu like the one on vimeo.com, but the most tutorials about making a dropline is using something like this:

.submenu { display:none; }
li.item:hover > .submenu { display:block; }

Insted I would like to use overflow:hidden; to show the submenu. Something like this: http://jsfiddle.net/tuplet/Jv77L/

In this example I've used jQuery to determine the height of #top from 40px to 80px when you hover a list item. This is actually my main problem because I don't know how to do this without jQuery? How can I make the #top height change when hovering a li?

I don't know if it's possible (or the best way) but let me know if you have an idea :)

Thanks

Answer 1

JavaScript を削除し、これを CSS に追加します。

#top:hover { 
    height:80px;
}