Problème de menu "active"

Bonjour,

Je suis actuellement en train de refaire mon portfolio, mais je bloque à mon menu active.

Je souhaiterai mettre une petite image ( fléche ) en dessus de chaque lien quand il est actif, mais je fais un site one page et j'ai quatre background différent, il faudrait donc que les images soient différentes par rapport à chaque background.

Code Html

	<nav>
        	<ul class="menu">
        	<li class="active"><a href="#home">Home</a></li>
            <li><a href="#cv">Cv</a></li>
            <li><a href="#gallerie">Galerie</a></li>
            <li><a href="#contact">Contact</a></li>
        
        </ul>   
    </nav>

Code Css

.menu li.active {background:url(../img/active_home.png) bottom no-repeat;}
.menu a:hover{color:red;}

Code Js

$(".menu li a").click(function() {
    
    $(".menu li").removeClass("active");
    $(this).parent().addClass("active");
    
    return false;
});

Merci d'avance pour votre aide.

Salut,
tu as ton site online?

c'est toujours dur de débloquer sans voir ce qui se passe :s

Merci

Salut,

Quelque chose de ce genre ?

li.active:nth-child(1) { background-position: left top; }
li.active:nth-child(2) { background-position: left -20px; }
li.active:nth-child(3) { background-position: left -40px; }
li.active:nth-child(4) { background-position: left bottom; }

ou

li.active { background-position: left top; }
li + li.active { background-position: left -20px; }
li + li + li.active { background-position: left -40px; }
li + li + li + li.active { background-position: left bottom; }

tm

Bonjour,

Oui Ultra, j'ai pas penser à mettre le lien. Le voici : http://www.benoit-website.fr/

Tm, j'ai essayer ton code mais j'ai dû me tromper quelque part parce que ça ne change rien.

Mon active reste quand je clique sur les autre partie du menu.

J'aurai plutôt penser a un script js switchant entre mes images hover mais je ne sais pas si ça fonctionne sur un one page.

Merci
Modifié par Hejin4te (08 Feb 2013 - 11:02)

Re,

Sur ta page en ligne, ma CSS n'est pas présente...
Si tu as laissé ceci : .menu li.active {background:url(../img/active_home.png) bottom no-repeat;} dans ta feuille de styles, tu dois rajouter ta classe .menu devant mes sélecteurs...

tm

Re,


Je viens d'essayer ce que tu ma dis mais ça ne fonctionne toujours pas, l'hover reste sur home.

J'ai peut-être fait une erreur dans la manip ? : http://www.benoit-website.fr/