How to get drop down button to stay selected

Question

basically what I'm trying to do is simply to make the sorting drop down button stay selected on whatever one you click on. At the moment when you click on one of the options it always goes back to "All". My html, CSS and jquery are below also See the ALL button in action here on my site: http://fireflyliving.com/properties/

jQuery/Javascript:

$(document).ready(function($){  

    var nav = $("#catpicker");  

    nav.find("li").each(function() {  
        if ($(this).find("ul").length > 0) {    

            $(this).mouseenter(function() {  
                $(this).find("ul").stop(true, true).slideDown();  
            });  

            $(this).mouseleave(function() {  
                $(this).find("ul").stop(true, true).slideUp();  
            });  
        }  
    });

})(jQuery);

HTML:

<div class="sort">
<p>only show me :</p>
<nav id="catpicker">
    <ul>
        <li><a href="#" id="allcat" class="current"><img src="<?php bloginfo('template_directory'); ?>/images/all-btn-small.png" width="55px" height="55px" /></a>
            <ul>
                <li><a href="#" id="active" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/active-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="pending" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/pending-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="sold" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/sold-btn-small.png" width="55px" height="55px" /></a></li>
            </ul>
        </li>                   
    </ul>               
</nav>      

CSS

.sort nav#catpicker {
    float: left;
    position: relative;
    margin-top: 15px;
    z-index: 2;
}   

nav#catpicker ul ul { 
    display:none; 
    position:absolute; 
    left:0;
}  

nav#catpicker ul li { 
    background: #dcdbdb;
    padding: 10px;
}  

nav#catpicker ul ul li { 
    float:none;   
}

Answer 1

Try this

<

div class="sort">
<p>only show me :</p>
<nav id="catpicker">
       <a href="#" id="allcat" class="current"><img src="<?php bloginfo('template_directory'); ?>/images/all-btn-small.png" width="55px" height="55px" /></a>
                <li><a href="#" id="active" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/active-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="pending" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/pending-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="sold" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/sold-btn-small.png" width="55px" height="55px" /></a></li>
        </li>                   
    </ul>               
</nav> 

add this to your filter class

.filter
{
display:none;
}

in your code

$(document).ready(function($){  

    $("#catpicker .current").mouseenter(function() {  
                $(".filter").stop(true, true).slideDown();  
            }); 
   $("#catpicker .current").mouseleave(function() {  
                $(".filter").stop(true, true).slideUp();  
            }); 
    $("#catpicker .filter").click(function() {  
                $(this).removeClass("filter").addClass("current");
            }); 

    });

})(jQuery);

Answer 2

I figured it out folks, it was pretty easy, just a few lines of code. Sometimes the developers on here like to make things more complicated than it should me. I like to follow the KISS formula, keep it simple stupid : )