How to make a click enabled multi level menu in CSS..?

See more:

CSS

Guys, I am new to CSS. I want to create a click enabled multi level menu in css. In the menu the selection show stay selected until another event happen. ie for eg if I'm selecting the sub menu of the second level and I'm moving the mouse to some other location the selection should still stand..

Guys, Please help me..Its very urgent.

(Like windows Start menu).
Thank you in advance...

Here is my css

#nav {
   display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 16px Trebuchet MS;color:#000000;
   text-shadow:#FFF 0 0 1px;cursor:pointer;padding:5px;background-color:#5DBACB;background-image:url("mainbk.png");
   background-repeat:repeat;background-position:0 0;
   border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
   height:54px;
}
#nav ul
{
   background-color:#5DBACB;
    height:43px;
    list-style:none outside none;
    margin:0px;
    padding:1px;

}
#nav ul ul {
    background-color:#5DBACB;
    border:1px solid #8A867A;
    display:none;
    vertical-align:middle;text-align:left;text-decoration:none;font:bold 16px Trebuchet MS;color:#000000;
   text-shadow:#FFF 0 0 1px;
    left:0;
    padding:0;
    position:absolute;
    width:168px;

    background-image:-webkit-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
    background-image:-moz-linear-gradient(left center , #F8FAFF 0%, #B8D1F8 15%, #FFFFFF 15%, #FFFFFF 100%);
}
#nav ul ul ul {
    display:none;
    left:168px;
    position:absolute;
    top:-1px;
    width:168px;
}
#nav ul li {
    float:left;
    margin-right:1px;
    position:relative;
    height:26px;
    top: 0px;
    left: 0px;
}
#nav ul li a {
    border:1px solid #B8D1F8;
    color:#000;
    cursor:default;
    display:block;
    font:bold 16px Trebuchet MS;
    padding:10px 3px 4px;
    text-decoration:none;
    height:35px;

}
#nav ul li span {
    background:url("../images/u.gif") no-repeat scroll 90% center transparent;
    border:1px solid #B8D1F8;
    width:158px;background-color:#5DBACB;height:35px;
    cursor:default;
    display:block;
    font:bold 18px Trebuchet MS;
    padding:10px 3px 4px;
    position:relative;

}
#nav ul ul li span {
    background:url("../images/s.gif") no-repeat scroll 97% center transparent;
}
#nav ul ul li {
    float:none;
    margin-right:0;
    padding:3px;
    text-indent:10px;
}
#nav ul ul li a,#nav ul ul li span {
    border:1px solid transparent;
    padding:3px 3px 5px 2px;

}
#nav ul ul li a img,#nav ul ul li span img {
    border-width:0;
    float:left;
    margin-right:5px;
    vertical-align:middle;

}
#nav ul li:hover > a,#nav ul li:hover > span {
   background-color:#000000;background-image:none;color:#ffffff;text-decoration:none;height:19px;
}
#nav img.close {
    display:none;
    height:100%;
    left:0;
    position:fixed;
    top:0;
    width:100%;
    z-index:-1;
}

#nav ul li span:focus + ul,#nav ul li ul:hover,#nav ul:hover + img.close {
    display:block;
}