[résolu]Problème avec mon menu animé

Bonjour à tous
J'ai codé un petit menu animé, qui me pose de petits soucis.
Avant d'exposer mes problèmes, je vous invite à le visualiser sur codepen.

1er problème, j'aimerais que les onglets du menu grandissent vers le haut. Ca je n'y arrive pas.
2eme problème : j'ai rien trouvé de mieux que de configurer le bloc "menu" en absolu afin de ne pas décaler les blocs suivants si je l'avais laissé dans le flux. Mais, forcement, ça me pose un soucis de mise en page quand je redimensionne la fenêtre.

Auriez vous des solutions à cela ?
par avance merci
Modifié par bboygaz (12 Aug 2014 - 22:43)

Bonjour

Je me permets de relancer ma bouteille à la mer car je n'ai toujours pas trouver la solution

Par avance merci.

Salut,

Je n'ai pas trop le temps de regarder, mais en jetant un petit coup d’œil, ceci devrait t'avancer un peu :

.menu {
  width: 960px;
  margin: 0 auto;
  
}
.menu ul { margin: 0;}

.menu li:hover {
    padding-top: 15px;
    background-color: #ff7373;
}

J’espère que ça va t'aider, je repasserai pour voir si ça marche de ton coté

Merci pour ta réponse SpiStache.
Malheureusement, ça ne marche qu'à moitié :
L'onglet se deploie bien vers le haut (et je m'en veux de na pas avoir pensé au padding-top )

Par contre tout positionnement autre qu'absolu entraine un décalage de la div suivante. Ce qui est logique, mais qui m’embête...

Mais ça avance, encore merci

Voilà

.menu{
  position: relative;
}
.menu ul{
    position: absolute;
    left: 360px;
    bottom: -17px;
}
.menu li {
    display: inline-block;
    width: 100px;
    height: 25px;
    border: 2px solid white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: red;
    text-align: center;
    transition: height 0.25s ease;
    vertical-align: bottom;
}

Mettre une position relative donne une "référence" au bloc enfant qui sera positionné en absolu.
Ensuite une petit alignement vertical en bottom sur les li.
Modifié par juliesunset (12 Aug 2014 - 21:59)

Merci Julie,

"Mettre une position relative donne une "référence au bloc enfant que sera positionné en absolu"
ça je vais m'en souvenir.

Ceci dit, le menu se déroule maintenant à nouveau vers le bas ><

j'ai mis le codepen à jour.

Encore merci.

Regarde bien le code que je t'ais donné, Top et Left sont indiqué avec position absolu sous .menu ul

EDIT: en fait j'ai mis un bottom, pas un top
Modifié par juliesunset (12 Aug 2014 - 21:51)

Ah autant pour moi, je sais pas ce que j'ai foutu.
Bien ! merci Julie !

hop ! resolu

codepen
Modifié par bboygaz (12 Aug 2014 - 22:42)