Bonsoir , je suis entrain de crée un menu pour mon site mais je suis bloquer.

Lorsqu’on passe le curseur sur mon menu " accuel , musique etc " je veux que sa soi du genre comme sa http://livedemo00.templatlate-help.com/wordpress_38292/ j'ai pris l'exemple d'un template pour vous montrez que sa prenne toute la case quoi mais comment faire ? j'ai jamais compris pourtant je fais des recherches mais je trouve rien merci cordialement.

Suffit de "jouer" avec display: none; et display: block;
Mais tu devras utiliser du javascript pour ça.
genre
onmouseover="document.getElementById('id_du_div').
style.display='block'".

Exemple (non testé) :

<a
onmouseover="document.getElementById('contenumenu1
').style.display='block'"

onmouseout="document.getElementById('contenumenu1'
).style.display='none'" href="#">Menu 1</a>

<div id="contenumenu1" style="display: none;"

onmouseover="document.getElementById('contenumenu1
').style.display='block'"

onmouseout="document.getElementById('contenumenu1'
).style.display='none'">
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
</div>

Après tu ajoutes un peu de couleurs.
Je te donne du css vite codé:

<style type="text/css">

1. bouton

{
display: inline-block;
background-color: black;
width: 100px;
border: 1px solid red;
text-align: center;
padding: 5px;
color: white;
}

1. bouton:hover

{
background-color: brown;
}

1. contenumenu1 li

{
display: block;
background-color: grey;
width: 100px;
border: 1px solid black;
text-align: center;
padding: 5px;
}

1. contenumenu1 li:hover

{
background-color: silver;
}
</style>

Sa ne fonctionne pas !

Mais merci quand même

J'ai pas tésté ton 2eme script je vais essayer merci

Punaise merci sa marche !! je vais tester votre code sur mon site et je vous-en redis plus MERCI ENCORE

Au pire, je te donne le script que j'ai terminé

<style type="text/css">

1. bouton

{
display: inline-block;
background-color: black;
width: 100px;
border: 1px solid red;
text-align: center;
padding: 5px;
color: white;
}

1. bouton:hover

{
background-color: brown;
}

1. contenumenu1 li

{
display: block;
background-color: grey;
width: 100px;
border: 1px solid black;
text-align: center;
padding: 5px;
}

1. contenumenu1 li:hover

{
background-color: silver;
}

1. contenumenu2 li

{
display: block;
background-color: grey;
width: 100px;
border: 1px solid black;
text-align: center;
padding: 5px;
}

1. contenumenu2 li:hover

{
background-color: silver;
}
</style>

<a id="bouton"
onmouseover="document.getElementById('contenumenu1
').style.visibility='visible'"

onmouseout="document.getElementById('contenumenu1'
).style.visibility='hidden'" href="#">Menu 1</a>
<a id="bouton"
onmouseover="document.getElementById('contenumenu2
').style.visibility='visible'"

onmouseout="document.getElementById('contenumenu2'
).style.visibility='hidden'" href="#">Menu 2</a>

<br />

<div id="contenumenu1" style="visibility: hidden;display: inline-block;"

onmouseover="document.getElementById('contenumenu1
').style.visibility='visible'"

onmouseout="document.getElementById('contenumenu1'
).style.visibility='hidden'">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
</div>

<div id="contenumenu2" style="visibility: hidden;display: inline-block;"

onmouseover="document.getElementById('contenumenu2
').style.visibility='visible'"

onmouseout="document.getElementById('contenumenu2'
).style.visibility='hidden'">
<li><a href="#">Menu 2</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
<li><a href="#">Lien du menu</a></li>
</div>

Tu pourras le modifier comme tu le souhaites.

Franchement merci tu m'a beaucoup aider , je chercher sa depuis longtemps

Et pour ton css, un peu plus sympa

1. bouton

{
box-shadow: 1px 1px 5px black;
display: inline-block;
background-color: orange;
width: 100px;
border: 1px solid red;
text-align: center;
padding: 5px;
color: white;
border-radius: 10px;
}

1. bouton:hover

{
background-color: brown;
}

1. contenumenu1 li

{
border-radius: 5px;
display: block;
background-color: grey;
width: 100px;
border: 1px solid black;
text-align: center;
padding: 5px;
opacity: 0.5;
}

1. contenumenu1 li:hover

{
background-color: silver;
opacity: 1;
}

1. contenumenu2 li

{
border-radius: 5px;
display: block;
background-color: grey;
width: 100px;
border: 1px solid black;
text-align: center;
padding: 5px;
opacity: 0.5;
}

1. contenumenu2 li:hover

{
background-color: silver;
opacity: 1;
}
li a
{
color: black;
text-decoration: none;
}
li a:hover
{
color: blue;
text-decoration: underline;
}

Désolé de poster tant de trucs, mais je veux tout le temps du parfait

Merci , tu a l'aire d’être un bon codeur .

j’espère aussi que ce topic servira a d'autre

Après y'a bien mieux, tu peux utiliser "jQuery" pour faire des effets au survol... mais bon, j'ai fait au plus simple