Bonjour, j'aimerais créer un menu en css qui, quand on passe la souris dessus, le menu s'agrandit en hauteur
Pour mon code HTML
<div id="menu">
<ul>
<li id="menu_page"><a href="index.php#contents">Accueil</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Livre d'or</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>Pour mon code css
#menu
{
height: 33px;
text-align:center;
background: green;
margin-top: 10px;
padding-top: 30px;
}
#menu ul, #menu ul li
{
margin: 0px;
padding: 0px;
display: inline-block;
}
#menu ul li
{
height: 33px;
background: blue;
}
#menu ul li:hover, #menu_page
{
position: relative;
height: 63px;
top: -30px;
background: white;
}Les backgrounds sont juste la pour m'aider. Par la suite j'aimerais aussi utiliser un before et un after pour mettre des images aux extrémités des li.
Quelqu'un a une piste pour résoudre ce problème?
Avec jquery tu peux faire un bout code dans ce style pour ajouter une image avant et apres un li
$('li').hover(
function(){
$(this).before('<img src="chemin_vers_image" />');
$(this).after('<img src="chemin_vers_image" />');
},
function() {
$(this).prev().remove();
$(this).next().remove();
}
);
Merci.