jQuery nested ul navigation menu, accordion or tree menu? -

I am unsure of the best option for implementing a side navigation menu, with max 4 Nested UL is the biggest problem It is that some headings need to be expanded to show child elements, they also link to different pages.

I think the best method is not linked to that individual page by default, instead it has an icon that links to that page. I have the issue that when you navigate to active items and choose, it does not seem that it seems.

I did some research on the jQuery tree navigation menu, but I am unsure about it:
1) how they are customizable,
2) I can have children showing the title And somehow a personal page

Please, what is the best option for me, please? Oh, and the solution should only be based on HTML / CSS / jQuery, thanks.

HTML (cut, aggregate has 100 links):

  & lt; Ul class = "menu" & gt; & Lt; Li class = "menu_level_1" & gt; & Lt; A href = "/" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "menu_level_1" & gt; & Lt; A href = "/ link2" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "menu_level_1" & gt; & Lt; A href = "#" & gt; Link 3 & lt; / A & gt; & Lt; Ul class = "sub_menu_2" & gt; & Lt; Li class = "menu_level_2" & gt; & Lt; A href = "/ link4" & gt; Link 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "menu_level_2" & gt; & Lt; A href = "/ link5" & gt; Link 5 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "menu_level_2" & gt; & Lt; A href = "#" & gt; Link 6 & lt; / A & gt; & Lt; A href = "/ link6" & gt; Go to link 6 & lt; / A & gt; & Lt; Ul class = "sub_menu_3" & gt; & Lt; Li class = "menu_level_3" & gt; & Lt; A href = "/ link7" & gt; Link 7 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;    
 
 
 Use heavy material feedback in float to create menu, additional  
 
 
 
 
 
 
 
 
 
 
 
 / Li>