Effet de survol sur un menu en CSS

Bonjour à tous, je bloque sur un truc, surement à la con...
J'essaie de faire sortir un bloc de couleur (plus grand et plus haut) au survol de l'item de menu.


Ce bloc doit "sortir" du menu donc j'imagine avec un positionnement absolute ?
Idéalement une solution uniquement en CSS, pas de javascript si possible.

Si vous avez des pistes de recherches je suis preneur. Merci d'avance.

Olivier.

salut,
il doit y avoir plusieurs façons de faire. Tu pourrais passer les pseudo-éléments ":before" et ":after". Un exemple vite fait.
À noter que les transitions sur ":before/:after" ne marchent pas partout et avec les vieilles versions.

Merci Zelalsan c'est exactement ça.
Top.

Juste une question pour ma culture technique...
--><li><a href="">Actualités</a></li><!--
a quoi servent --> et <!-- ?

sohappy a écrit :
Juste une question pour ma culture technique...
--&gt;&lt;li&gt;&lt;a href=&quot;&quot;&gt;Actualités&lt;/a&gt;&lt;/li&gt;&lt;!--
a quoi servent --&gt; et &lt;!-- ?

Bah comme çà à rien sauf nuisible

mais comme çà : <!-- <li><li> --> c'est pour faire un commentaire en HTML

mini-truc a écrit :

Bah comme çà à rien sauf nuisible

Nop ce n'est pas directement nuisible, c'est une astuce/hack pour éviter les "whitespace" dans un menu lorsque l'on veut mettre des blocks les uns à coté des autres avec display: inline-block. Par défaut et à cause de l'indentation du code, un espace de 3/4 pixels se crée entre chaque élement. Et retirer l'indentation rendrait le code peu lisible. Donc on fait en sorte que les espaces entre les balises deviennent des commentaires pour que le navigateur les ignore.

Explication ici : Le problème white-space

Descendre pratiquement en bas de l'article.
Modifié par Apoooo (28 Aug 2013 - 16:00)

@Apoooo : je ne connaissais pas comme astuce mais c'est pas quelque chose que je vais utiliser pour autant ; je ne trouve pas çà vraiment très propre surtout qu'il existe des solutions transparentes en CSS.

mini-truc a écrit :
@Apoooo : je ne connaissais pas comme astuce mais c'est pas quelque chose que je vais utiliser pour autant ; je ne trouve pas çà vraiment très propre surtout qu'il existe des solutions transparentes en CSS.

Transparentes aux yeux de qui ? Du dév ou du client ?
Pour le client, dans les deux solutions, il ne voit aucune différence.

Quand on a recours à un "hack" pour combler les lacunes des navigateurs, c'est rarement propre m'enfin je viens pas faire un débat, je donnais juste l'info

Merci pour l'astuce des commentaires, dans mon cas plus compliqué car le menu est généré dynamiquement avec Wordpress.

Je reviens sur ma demande et sur l'astuce donnée pour l'effet d'agrandissment fonctionne super mais dans mon cas, le menu (UL) est imbriqué dans une div qui possède cette feuille de style : position: absolute; top: 45px; background-color: #d3b884; margin: 0 auto; width: 100%; opacity: 0.8; Du coup d'éléments ne peux pas s'agrandir.
Quelle astuce pour le "faire sortir" de mon div conteneur ?

J'ai trouvé.

http://jsfiddle.net/n6yCs/

Merci.

La correction est ici :
http://jsfiddle.net/n6yCs/1/

mini-truc a écrit :
@Apoooo : je ne connaissais pas comme astuce mais c'est pas quelque chose que je vais utiliser pour autant ; je ne trouve pas çà vraiment très propre surtout qu'il existe des solutions transparentes en CSS.

Quelles sont les solutions transparentes ?

Zelalsan a écrit :

Quelles sont les solutions transparentes ?

Tout est cité dans la doc que nous a donné @Apoooo ; jvais pas refaire un tuto -_- ; néanmoins si c'est le terme qui vous gêne je parle de transparence au niveau des synthaxes et donc des scripts ; c'est un avis personnel et qui n'engage que moi ; mais je trouve çà ennuyeux de trouver cela dans un script (html) alors que c'est un souci de CSS...

mini-truc a écrit :


Tout est cité dans la doc que nous a donné @Apoooo ; jvais pas refaire un tuto -_- ; néanmoins si c'est le terme qui vous gêne je parle de transparence au niveau des synthaxes et donc des scripts ; c'est un avis personnel et qui n'engage que moi ; mais je trouve çà ennuyeux de trouver cela dans un script (html) alors que c'est un souci de CSS...

Faudrait déjà qu'on se mette d'accord sur ce qu'est un script HTML .
Je n'ai rien vu qui pourrait expliquer une solution propre en CSS sur le lien donné. Il est question de mettre une marge négative de "-.3px" ou quelque chose comme ça mais c'est du bricolage. Le vrai problème se situe bien au niveau HTML et ce n'est donc pas un problème CSS. C'est l'interprétation du navigateur des sauts de ligne ajoutés.
Les commentaires restent la solution la plus propre et la plus juste. L'autre consisterait peut être à tout mettre sur une ligne mais question lisibilité, c'est franchement pas top .