Keep active menu item highlighted

Question

How would I make it so that the item that is clicked in the menu, stays highlighted blue. So basically the active menu item.

Fiddle

I've tried using css active, but im thinking I need javascript or something.

 #cssmenu > ul li > a:active, #cssmenu > ul li:active > a {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background: #54cdf1;
    background: -webkit-linear-gradient(#72d4f2, #54cdf1);
    background: -moz-linear-gradient(#72d4f2, #54cdf1);
    background: linear-gradient(#72d4f2, #54cdf1);
    border-color: transparent;
}

Answer 1

You'll need some JS for that.

$(document).ready(function() {
    $("#cssmenu li").on("click", function() {
        $("#cssmenu li").removeClass("active");
        $(this).addClass("active");
    });
});

Then just style #cssmenu li.active the way you want it in your CSS.