I'm trying to achieve a fading navigation system, where everything in the nav but the element being hovered will fade out to say, 0.3 opacity.

At the same time, I want clicks to have a greater "value", so as to not fade out a clicked element (or in this case, the active subpage).. That didn't make much sense to me either, I'll just post the code I have.

    <nav id="main">
        <ul>
            <li>
                <a>work</a>
            </li>
            <li>
                <a>about me</a>
            </li>
            <li>
                <a>contact</a>
            </li>           
        </ul>
    </nav>

And the script that makes it sparkle:

var nava = "nav#main ul li a";

$(nava).hover(function(){
    $(nava).not(this).removeClass().addClass("inactive");
    $(this).addClass("active");
});

$(nava).click(function(){
    $(this).removeClass().addClass("active");
});

});

And the classes / css(less):

.inactive{color:@color2; border-bottom:0 solid #000;}

.active{color:@color1; border-bottom:1px solid #000;}

nav#main ul li a{color:@color1;}

Basically the hover states take priority over the click, which I do not want to happen.

Ideally I'd like for all of the anchor elements to revert to its original state whenever you hover out from the unordered list holding it all. If anyone has some pointers on this it'd be greatly appreciated. Cheers!