Menu et infos au survol

[guilhem2]

Bonjour,
Je souhaite insérérer un menu. Au survol de chaque élement de celui-ci, je souhaite que dans un DIV (situé juste au dessous du menu) apparaissent des infos concernant l'élèment que je suis en train de survoler dans le menu...
Comment faire ? Avez-vous une idée ?
Avec les CSS, please...
Merci !
Cordialement.
Guilhem.

[calimo]

Avec les CSS, please...

J'en conclus que la compatibilité avec IE ne t'intéresse pas ?

[guilhem2]

Yes !
M'enfin si il y a une autre solution qui soit compatible avec IE, je suis prenant !

[guilhem2]

Aucune idée ?

[guilhem2]

Aucune idée ?

[guilhem2]

Aucune idée ?

[Asumbaa]

Bonjour,

Arrêter la café ? (sans méchanceté, c'est juste pour rire)
Sinon, tu peux aller lire cet excellent article sur Alsacreations

[calimo]

Arrêter la café ?

Oui en effet

Quelque chose comme :

Code : Tout sélectionner

<ul id="menu">
	<li><a href="URL" title="facultatif" hreflang="lang">Élément 1</a> <span>Infos sur l'élément</span></li>
	<li>Autres éléments</li>
</ul>

#menu li span {
	display:none;
}
#menu li:hover span {
	display:block;
	position&#133;;
	top:&#133;px;
}

Tu peux inclure le <span> dans le a et ça pourrait être compatible avec IE. Cela dit un lien trop long c'est pas bon du tout niveau accessibilité, donc voilà

[guilhem_mdg]

Et si je souhaite afficher un menu de ce genre:
Menu1 :: Menu2 :: Menu 3 :: ... (sur une seule ligne)
Et au survol de Menu X afficher une ligne juste en dessous sans que le reste du menu ne bouge. Comment faire ?

Je veux:

Code : Tout sélectionner

Menu1 :: Menu2 :: Menu 3 :: ... (sur une seule ligne)
La phrase que je veux afficher lorsque je survole Menu 

1

Et pas:

Code : Tout sélectionner

Menu 1
La phrase que je veux afficher lorsque je survole Menu 1
:: Menu2 :: Menu 3 :: ...

Merci de vos rpéonses !

[calimo]

Ben tu mets simplement le span en position absolue

Edit : retrouvé le lien : http://www.meyerweb.com/eric/css/edge/popups/demo.html et aussi http://css.maxdesign.com.au/listamatic/

[guilhem_mdg]

Ok merci à tous ! 8)