Как совместить click mouseover mouseout

Есть меню, в меню несколько пунктов, как сделать так чтобы при клике на какой-то из них, background менял цвет(допустим. серый), и оставался серым до тех пор, пока не нажали другой пункт меню. Но кроме этого нужен еще hover или mouseover/out (подскажите, что лучше). Так вот, чтобы при нажатом каком-то пункте mouseout не убирал цвет я использовал unbind. Дальше возникла проблема в том, что при нажатом пункте меню, при наведении на другие пункты меню они тоже закрашиваются, то цвет и вовсе убирается. Я в общем перепробовал тысячу раз и каждый раз какие-то косяки, запутался уже.. К тому же, хотел сделать так, чтобы при обновлении странички или переходе на какой то пункт меню он оставался подсвеченным, это я реализовал с помощью localStorage, вроде работает, но тоже не очень. Буду премного благодарен за любую помощь) Я нуб в js поэтому сильно не бейте

$(document).ready(function ()
{
    $("ul > li a").click(function ()
    {
        $("ul > li a").css({"background": "white"});
        $(this).css({"background": "#ccc"});
        $(this).unbind("mouseout");
    })
    .mouseover(function ()
    {
        $(this).css({"background": "#ccc"});
    })
    .mouseout(function ()
    {
        $(this).css({"background": "white"});
    });
});