将css悬停转换为jquery onclick for div layer

Question

We have a header, with username on it. Essentially, for now, the user hovers over there username and precariously moves the mouse onto the div to retain focus, and access different account functionality.

But it is crap to be honest, and I wanted to convert it to onclick, ala google style.

Here is a screenpic of what we have.

Here is what I would like to achieve.

Wondering if anyone knows how to do this.

Sample fiddle here: http://jsfiddle.net/ozzy/WkLBF/

Essentially, I want it so user clicks on the name and the div panel displays and remains until they click again.

Any help appreciated, we use jquery if thats any consolation ( this demo uses no javascript at all at present )

Answer 1

Well... this will work as far as you have described, but I'm not sure it's exactly what you want. :P Could you expound?

Demo

$(".category-filter>li").click(function(){
    $(this).children("ul").toggle();
});

Answer 2

http://jsfiddle.net/WkLBF/25/

Javascript:

jQuery(document).ready(function($){
    $('ul li a').live('click', function(){
        if($('.category-filter>li:hover>ul').css('display')=='none')
        {
            $('.category-filter>li:hover>ul').css('display', 'block');
            $(this).addClass('userbox-on');
        }
        else
        {
            $('.category-filter>li:hover>ul').css('display', 'none');
            $(this).removeClass('userbox-on');
        }
    });
});

CSS:

.userbox-on
{
  border: 1px solid red;
  border-bottom: none;  
  background-color: #fff;
    padding: 5px;
}