I'm using CSS list menu as the top navigation. I can see the following HTML structure on source
Is there a way that I can make li tag clickable or wrap the li tag inside the anchor tag?
Coz the problem is, at the moment only the href is clickable not the whole menu item.
The CSS List Menu web part is very structures and not developer friendly at all. You're better off using a repeater or a hierarchical viewer to get the structure and custom actions you're looking for.
To do what you're looking for with the web part you're currently using, you'd have to write a lot of javascript.