CSS, overflow hidden, alleen de onderkant.

[MrVegeta]

Ik ben bezig met een website waar de volgende situatie in voorkomt. Ik heb een navagatie element van 120px hoog. Daarin zit een verborgen element van 300px hoog. Dit element schuift naar boven wanneer de pagina geladen is, maar vanwege het verschil in hoogte is de verborgen div te zien aan de onderkant van de navigatie.

Ik heb een kleine jsFiddle gemaakt om het duidelijker te maken. http://jsfiddle.net/umc4c/

De vraag is dus, hoe kan ik het zwarte element onzichtbaar maken aan de onderkant van de navigatie?
Mijn huidige oplossing is de navigatie een height te geven van 700px en alles aan de onderkant uitlijnen en een overflow: hidden geven. Nu is het element niet te zien aan de onderkant en schuift het netjes naar boven, maar het lijkt mij sterk dat dit de beste oplossing is.

[Rekcor]

Uit je jsfiddle kan ik niet echt opmaken wat je bedoelt. Is dit nu de 'foute' situatie, of de oplossing die jij bedacht hebt?

En moet e.e.a. schuiven? Je zou ook de hoogte van het verborgen element kunnen veranderen om schuiven te simuleren.

[MrBrown]

Kan je niet beter het zwarte vlak een overflow hidden geven, en de grote van de div veranderen? Of de zwarte div wrappen in een andere div, en die een overflow van hidden geven?

edit:
ff zitten klooien:
http://jsfiddle.net/xeMUk/
Alleen in chrome getest.

[ Voor 19% gewijzigd door MrBrown op 16-04-2013 16:17 ]

[bonzen]

ik heb een CSS oplossing gevonden voor je:

Cascading Stylesheet:

nav {
    padding-top:400px;
    width:500px;
    height:120px;
    overflow:hidden;
    position:relative;
}
#content_home {
    padding:50px;
    position:absolute;
    z-index:0;
    background-color:#000;
    height:200px;
    width:200px;
    color:#fff;
}
ul {
    background-color:grey;
    width:500px;
    height:120px;
    position:relative;
    z-index:1;
}
li {
    float:left;
    margin-left:20px;
}