Problème de structure

antoine59
Les bases HTML/CSS

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?

2 réponses

thunder75
Réponse acceptée

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();
}
);

antoine59
Auteur

Merci.