在页面更改时保持菜单扩展处于打开状态

 <ul id=\"nav\">
    <li><a href=\"javascript:;\">Products</a>
           <ul id=\"nav2\">
        <li><a href=\"javascript:;\">Domestic Market</a>
            <ul>
                <li><a href=\"index.php?page=Product&id=1\">Link1</a></li>
                    <li><a href=\"index.php?page=Product&id=2\">Link2</a></li>
                    <li><a href=\"index.php?page=Product&id=3\">Link3</a></li>
        </ul>
       </li>
       <li><a href=\"javascript:;\">Commercial Market</a>
            <ul>
                <li><a href=\"\">Coming Soon</a></li>
            </ul>
       </li>
      </ul>
       </li>
       </ul>

ul {
    padding: 0px;
    margin: 0px;
    width: 10em;
        list-style-type:none;

}
li {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#003;  
}

li ul {
    display: none;
}
li.active > ul {
    display: block;
}

$(\'#nav\').delegate(\'li,a\', \'click\', function(e) {
    e.stopPropagation();

    var self = $(e.target),
        //get a reference to the clicked element
        active = self.parents().andSelf() //select all li\'s that should be active
        .addClass(\'active\'); //and activate them
    $(\'#nav .active\').not(active).removeClass(\'active\'); //deactivate others  
});

$(document).click(function(){
    $(\'.active\').removeClass(\'active\'); 
});