CSS3 Transition Glisser vers le Bas de l'Élément

Je suis en train de recréer un similaires dans le menu effet trouvé sur le World War Z film site, mais je ne peux pas sembler obtenir la transition CSS fonctionne correctement. J'ai obtenu la placez l'élément à afficher le bloc, mais la transition CSS ne fonctionnent pas. Je vais essayer d'obtenir un effet intéressant qui serait glisser par le haut ou par le bas, je n'ai pas de préférences. Aussi, si j'essaie d'aller sur l'un des liens, le sous-menu disparaît avant que je puisse cliquer dessus. Voici la Violon.

HTML:

    <ul id="menutitle">Menu Title</ul>
        <ul id="submenu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
</nav>

CSS:

#topmenu {
    background: #000; 
    width: 150px;
    height: 50px;
    color: #fff; 
}

#submenu {
    display: block;
    position: absolute;
    width: 110px;
    display: none;
    background: #333;
    list-style: none;
    line-height: 2em; 
}

#menutitle:hover + #submenu {
     display: block; 
    -webkit-transition: height 1s ease;
    -moz-transition: ease-in 2s none;
    -ms-transition: ease-in  2s none;
    -o-transition: ease-in  2s none;
    transition: ease-in  2s none;  
}

#menutitle { color: #ff0000; }

a { color: #FF0; }
Je suis en train de travailler sur ce sujet, mais votre structure html est incorrect.
Son violon est le départ de l'élément nav, mais l'ul éléments sont très bien - la tabulation est juste incohérent.
Le ul ne sont pas bien parce que rien ne peut être dans un ul outre un li. Cette ligne <ul id="menutitle">Menu Title</ul> doit être <ul id="menutitle"><li>Menu Title</li></ul> pour être valide en html.
Ah, c'était une bonne prise. Je ne pense pas vraiment que ce sujet depuis le navigateur semblait le rendre beau de toute façon.
Il peut ne pas être à la racine du problème, mais il peut causer une tonne de problèmes plus tard dans le projet. :]

OriginalL'auteur RomeNYRR | 2013-12-17

  1. 8

    Que peu de choses:

    Votre :hover sélecteur devrait être sur le #topmenu élément, et non le titre. C'est pourquoi la valeur liquidative de la zone est en voie de disparition si soudaine - il ne prend en vol stationnaire dans le menu texte.

    Vous pourriez avoir une petite idée fausse de l'animer définition de propriété. Vous devez choisir une propriété spécifique à animer; habituellement quelque chose comme "hauteur". Dans ce cas, ma solution a été de mettre "max-height". Il y a peut être un moyen de réglage de la hauteur de quelque chose comme "auto", mais si c'est perdu sur moi.

    En outre, la "transition" de la propriété est définie sur l'objet en tout temps, non seulement lorsque vous passez la souris'. C'est une sorte de constante de l'état pour indiquer "LORSQUE cette propriété est modifiée, faire une transition en douceur". De cette façon, vous pouvez avoir une série d'états différents, donnant à des hauteurs différentes.

    http://jsfiddle.net/8YHbq/4/

    #topmenu {background: #000; width: 150px; height: 50px; color: #fff; }

#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in; 
}

#topmenu:hover #submenu {
max-height: 200px;}

#menutitle {color: #ff0000;}
a {color: #FF0}

    Actuellement, le seul problème avec ma version que je suis juste en train de réaliser, c'est que depuis que max hauteur anime de 200px, la valeur liquidative, le menu sera complètement développé avant qu'il n'atteigne 200 - faire de l'animation moins lisse. Vous pourriez peut-être ajuster un peu en fonction de vos besoins.

    Merci pour ce Katana et de compensation de la confusion que j'ai eu avec la transition de la propriété.

    OriginalL'auteur Katana314