change menu behavior with purely CSS or JAVASCRIPT -

need change menu pure css or javascript menu online store. there categories , subcategories collapsed within categories. want have sub-cats auto expanded when page loads user doesnt have click these expand. domain is: wwww.tackpal.com

so took @ web site , when user clicks category, taken web page of specific category. thus, sub categories not included in home page.

your first solution edit menu template in cms if allow it.

a solution / hack below, changing template in cms better

if add code, when user visits home page, script below tell browser make ajax calls categories have sub-categories. when each category page source returned, finds sub-category list , inserts them home page's menu respectively.

to test code out. can go home page of web site. then, open console , paste in first functions , script inside onload function.

//a simple function used make ajax call , run callback target page source argument when successful function getsubpagesource(url, successcallback) {     var xhr = xmlhttprequest();     xhr.onreadystatechange = function()     {         if (xhr.readystate == 4 && xhr.status == 200)         {             //when source returned, run callback response text             successcallback(xhr.responsetext);         }     };     xhr.open('get', url, true);     xhr.send(); }  //wrap in onload event window.onload = function() {        //find categories sub categories     var categories = document.getelementsbyclassname('has-subcategories');     //loop through each category     (var ii = 0, nn = categories.length; ii < nn; ii++)     {         //use closure pass in static ii         (function(ii)         {             //get element             var element = categories.item(ii);             //find id             var id = element.getattribute('data-category');             //find url             var href = element.getattribute('href');             if (id && href)             {                 //found                 getsubpagesource(href, function(data)                 {                     //find sub categories                     //trim off before id shows first                     var substrsource = data.substr(data.indexof('data-category="'+id+'"'));                     //trim off remaining of category title                     substrsource = substrsource.substr(substrsource.indexof('</a>'));                     //trim off next category found                     substrsource = substrsource.substr(0, substrsource.indexof('home-categories-main'));                     //trim off next category starts, leaving source of sub categories                     substrsource = substrsource.substring(0, substrsource.lastindexof('<a '))                      //insert main menu after title                     console.log(id, substrsource);                      //create new node capable of having children                     var newnode = document.createelement("span");                     //insert new source new node                     newnode.innerhtml = substrsource;                      //insert new node after element                     element.parentnode.insertbefore(newnode, element.nextsibling);                 });             }         })(ii);     } }; 

this script may work in home page only have not tested out on other pages. if added other pages, might create duplicate sub-category lists on respective category pages.

note: huge downside second approach everytime visits homepage, browser in background in turn visiting category pages have sub-categories. means server have serve several pages each home page visit.

i recommend finding way edit menu template in cms instead of script above

pasting script above, homepage generated necessary links seen in screenshot below.