hover styles should stay onclick on multilevel menu loading dynamically

[Harleyy]

I have used the below script to create multilevel megamenu with a lot of customizations.

Below is the JsFiddle link for the same.

http://jsfiddle.net/DL7Xm/

Below is the CSS code for the same.


/* ######### Drop Down DIVs CSS ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border:none;
border-left: 2px solid #ffffff;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #09519b;
background-color: #d6d6d6;
text-decoration: none;
padding: 8px 0px 8px 13px;

}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
font-weight:bold;
background-color:#bfbfbf;
}

/* ######### Neutral CSS ######### */

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

/* ######### Marker List Vertical Menu ######### */

.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
/*position: relative;*/ /*Preserve this for "right" arrow images (added by script) to be positioned correctly*/
position: absolute;
top:136px;

}

.markermenu ul{
list-style-type: none;
margin: 56px 0 0 0;
padding: 0;
/*border: 1px solid #9A9A9A;*/
}

.markermenu ul li a{
background: #d6d6d6; /*light gray background*/
color: #09519b !important;
display: block;
width: auto;
padding: 8px 0;
padding-left: 13px;
text-decoration: none;
/*border-bottom: 1px solid #B5B5B5;*/
}

.topRound{
border-radius:5px 5px 0 0;
}

.bottomRound{
border-radius:0 0 5px 5px;
}

* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover, .markermenu ul li a.selected{
font-weight:bold;
background-color:#bfbfbf;
}


/* ######### Customized Drop Down ULs CSS (inherits from ddlevelsmenu-base.css) ######### */

.blackwhite li a{
background: white;
}

.blackwhite li a:hover{
background: black;
color: white;
}

ul.miniBlocks{width:732px !important; background:#d6d6d6;}
ul.miniBlocks1{width:366px !important; background:#d6d6d6;}
.miniBlocks li{float:left !important;}
.miniBlocks1 li{float:left !important;}

.mattblackmenu a.selected, .ddsubmenustyle li.selected > a {
background: #bfbfbf; /*background of tab with "selected" class assigned to its LI */
color: #09519B;
font-weight:bold;
}

The script and css are working fine. When you move on to the navigation items, you can see the mouse over selection with a darker background color and font bold.

Now, this menu is coming dynamically from a js/jsp include file.

What I need is when a user wants to open up a page, onclick of it, the hover style should stay.

For instance,

If you mouse over on JavaScript Reference > Item Folder 5b > Item Folder 5.2b > Sub Item 5.2.1b and when you want to open Sub Item 5.2.1b, onclick of it, when the page relevant to Sub Item 5.2.1b opens, the hover style should stay on click for the user to know that he is on Sub Item 5.2.1b page when he again wants to hover and open another page or see on what page is he on.

Any other ways are welcomed, but should work on my dynamic scenario.