How to open javascript menu with click & close with mouse out

Question

This is my menu JavaScript function. now my menu open with click & close with click. i want to open with click & close when mouse leave the button.

$("#theme_select").click(function() {
    if (theme_list_open == true) {
        $(".center ul li ul").hide();
        theme_list_open = false;
    } else {
        $(".center ul li ul").show();
        theme_list_open = true;
    }
    return false;
});​

im edited with one person & top problem fixed. but when i want to move my mouse to opened menu item menu was closed. see my full script (before change):

<script type="text/javascript">

    var theme_list_open = false;

    $(document).ready(function () {

        function fixHeight () {

        var headerHeight = $("#switcher").height();

        $("#iframe").attr("height", (($(window).height() - 1) - headerHeight) + 'px');

        }

        $(window).resize(function () {

            fixHeight();

        }).resize();

        $("#theme_select").click( function () {

            if (theme_list_open == true) {

            $(".center ul li ul").hide();

            theme_list_open = false;

            } else {

            $(".center ul li ul").show();               

            theme_list_open = true;

            }

            return false;

        });

        $("#theme_list ul li a").click(function () {

        var theme_data = $(this).attr("rel").split(",");

        $("li.purchase a").attr("href", theme_data[1]);
        $("li.remove_frame a").attr("href", theme_data[0]);
        $("#iframe").attr("src", theme_data[0]);

        $("#theme_list a#theme_select").text($(this).text());

        $(".center ul li ul").hide();

        theme_list_open = false;

        return false;

        });

    });

    </script>

Answer 1

Like this ?

Example.. (Just edit your element selector, if you know jQuery enough)

HTML :

<ul>
    <li>Menu#1</li>
    <span>Sub</span>
    <li>Menu#2</li>
    <span>Sub</span>
</ul>

jQuery :

$("ul li").click(function () {
    $(this).addClass("showing").next("span").show();
});

$('ul').mouseout(function() {
  $("ul li.showing").removeClass().next("span").hide();
});

Demo : http://jsfiddle.net/JcKxV/

Edited in your case... Gonna look like..

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").addClass("showing").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
  $(".center ul li ul.showing").removeClass().hide();
    theme_list_open = false;
});

or

$("#theme_select").click(function() {
    if (theme_list_open == false) {
        $(".center ul li ul").show();
        theme_list_open = true;
    }
    return false;
});

$("#theme_select").mouseout(function() {
    if (theme_list_open == true) {
      $(".center ul li ul").hide();
        theme_list_open = false;
    }
});